（十 一）JavaScript 控制CSS

JavaScript 脚本化 CSS

元素节点的style属性（Element.style）

style属性的值是一个 CSSStyleDeclaration 实例。
这个对象所包含的属性与 CSS 规则一一对应，但是名字需要改写，比如background-color写成backgroundColor。改写的规则是将横杠从 CSS 属性名中去除，然后将横杠后的第一个字母大写。
如果 CSS 属性名是 JavaScript 保留字，则规则名之前需要加上字符串css，比如float写成cssFloat。

注意，该对象的属性值都是字符串，设置时必须包括单位，但是不含规则结尾的分号。比如，divStyle.width不能写为100，而要写为100px。

var div = document.getElementsByClassName('myDiv')[0];
div.style.width = '200px';

另外，Element.style返回的只是行内样式，并不是该元素的全部样式。通过样式表设置的样式，或者从父元素继承的样式，无法通过这个属性得到。元素的全部样式要通过window.getComputedStyle()得到。

window.getComputedStyle方法

行内样式（inline style）具有最高的优先级，改变行内样式，通常会立即反映出来。但是，网页元素最终的样式是综合各种规则计算出来的。因此，如果想得到元素实际的样式，只读取行内样式是不够的，需要得到浏览器最终计算出来的样式规则。

window.getComputedStyle方法，就用来返回浏览器计算后得到的最终规则（绝对值）。它接受一个节点对象作为参数，返回一个 CSSStyleDeclaration 实例，包含了指定节点的最终样式信息。所谓“最终样式信息”，指的是各种 CSS 规则叠加后的结果。

// <div id="myDiv" class="myDiv" style=" width: 10em;">mydiv</div>
var div = document.getElementsByClassName('myDiv')[0];
window.getComputedStyle(div).width   //160px

window.getComputedStyle方法返回的 CSSStyleDeclaration 实例是只读的
（兼容性：IE8及IE8以下不兼容）

Element.currentStyle

IE独有的属性
只读
返回的计算样式的值不是经过转换的绝对值，比如你写em（像素），它仍然会返回这个em值，写%值，仍然返回%值。

封装的兼容性方法

function getStyle(ele,prop) {
    if(window.getComputedStyle){
     return window.getComputedStyle(elem,null)[prop];
    }else{
        return elem.currenStyle[prop];
    }
}