用 js 设定标签的样式，并解决语法兼容性的问题

柔光的暖阳◎ 2023-07-18 14:17 5阅读 0赞

# 设定标签的样式 #

### 1. 给标签设定样式 ###

##### 语法 #####

标签对象.style.属性 = 属性值

### 2. 获取标签设定的样式 ###

##### 语法 #####

标签对象.style.属性

### 实例 ###

var oDiv = document.querySelector('div');
    // 通过 标签对象.style.属性 = '属性值'
    // 设定的是标签的行内样式
    // oDiv.style.color = 'red';
    
    // 获取样式
    
    // 行内样式,正确获取
    console.log( oDiv.style.color );
    console.log( oDiv.style.background );
    // 非行内样式,获取的结果是空字符串
    console.log( oDiv.style.fontSize );

······································································································································

# 获取标签执行的样式属性 #

### 语法及兼容性 ###

一般浏览器 值得是 非低版本IE浏览器方法（低版本IE会报错）：
    window.getComputedStyle(标签对象).属性
    
    低版本IE浏览器方法（非低版本IE会报错）：
    标签对象.currentStyle.属性
    
    注：获取的是标签最终执行的样式的属性值。如果是颜色，获取的是 rgb() 的形式。

### 实例 ###

var oDiv = document.querySelector('div');
    
    // 非低版本IE浏览器方法
    console.log(window.getComputedStyle(oDiv).fontSize);
    console.log(window.getComputedStyle(oDiv).color);
    
    // 低版本IE浏览器方法
    console.log(oDiv.currentStyle.fontSize);

不管行内还是非行内，获取的是，最终执行的样式属性值。  
例如：外部样式，被行内样式优先级 覆盖，获取的结果，就是最终执行的 行内样式。

### 兼容处理方案 ###

不能像之前，做 || 逻辑赋值，因为此时是JavaScript报错，会终止之后程序的执行。

// 不支持的浏览器会报错,影响之后的程序的执行
    var res = window.getComputedStyle(oDiv).fontSize ||  oDiv.currentStyle.fontSize;

兼容处理方法是 使用 **if判断** ，判断原理：

如果 window.getComputedStyle 这种方法没有，执行结果是 undefined  没有这个方法
    如果 window.getComputedStyle 这种方法有，就会有一个返回值

**操作过程：**

if( window.getComputedStyle )
    
      如果 window.getComputedStyle 没有 结果是 undefined 
          if( undefined )  --->  if( false )
          就调用  标签对象.currentStyle.属性
      如果 window.getComputedStyle  有  结果是 有内容的
          if( 有内容 ) --->  if( true )
          就调用 window.getComputedStyle 这个方法

##### 实例 #####

var oDiv = document.querySelector('div');
    
    if(window.getComputedStyle){ 
        // 支持 window.getComputedStyle 的会执行这里的代码
        // 一般浏览器会执行这里的代码
        var res = window.getComputedStyle(oDiv).fontSize;
    }else{ 
        // 不支持 window.getComputedStyle 的会执行这里的代码
        // 低版本IE浏览器,会执行这里的代码
        var res = oDiv.currentStyle.fontSize;
    }
    
    console.log(123);

**实际项目中，只有原生js，就是 最基础、最基本的js代码，才需要考虑兼容性  
最后的其他js方法，例如 jQuery 和 框架 ，都会自动解决兼容问题，我们使用 jQuery和框架写项目时，都不用考虑兼容问题。**