通过DOM属性/方法修改css样式

一、修改内联样式
内联样式：html标签中style属性里设置的css样式，优先级高于css样式表里的样式。

语法：ElementNode.style.样式名  = '样式值';  

注意：由于在js中 ’ - ’ 表示减法运算符，因此background-color等属性需要以驼峰命名法的方式书写。

二、访问css样式表中的样式（这个属性不推荐使用，兼容性差，适合IE8及以下）

语法：ElementNode.currentStyle.属性名 = '属性值';   //  只有IE内核支持

注意：此语法适用于目前正在显示的css样式，不管是内联样式还是样式表样式。

三、IE8以上版本：可通过getComputedStyle()方法访问对应元素节点的属性对象

语法：getComputedStyle(元素节点,null);  //  此方法为window对象的方法，可直接使用，IE9以上

用法：

var btn01 = document.getElementById('btn01');
var btn01Style = getComputedStyle(btn01,null);  //  这里获取了btn01元素的**css属性对象**

下面就可以用对象.属性的方式访问具体css：

btn01Style.width;  //  可访问到btn01元素的width属性

四、以上三种方法的对比
1.只有style属性可以修改属性值，其他属性/方式访问到的属性是只读的，不能修改
2.三种方法的兼容性都不一样，互补