设定标签的样式

1. 给标签设定样式

语法

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

2. 获取标签设定的样式

语法

标签对象.style.属性

实例

javascript">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() 的形式。

实例

javascript">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报错，会终止之后程序的执行。

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 这个方法

实例

javascript">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和框架写项目时，都不用考虑兼容问题。