JavaScript操作样式与内联样式

学习JS读取元素样式时遇到的一个小问题，谷歌浏览器不支持obj.currentStyle获取HTMLElement计算后的样式。然后整理JS操作样式和内联样式如下：

1.obj.style获取的是内联样式，即style属性中的值

以下面一个JS操作内联样式的例子作为讲解

    
    
    
    
    
    


    点击一下修改样式
    读取样式
    

2.（1）obj.currentStyle

只有IE和Opera支持currentStyle获取HTMLElement的计算后的样式，其他浏览器中使用getComputedStyle

获取元素的当前显示样式

语法：元素.currentStyle.样式名

（2）window.getComputedStyle函数

第一个参数为获取计算后的样式的目标元素

第二个参数为期望的伪元素，如':after'，':first-letter'等

注意：在Firefox中，第二个参数是必须的，如果没有期望的伪元素，就设置为null，而其他浏览器中可以省略第二个参数
下面以在谷歌浏览器上运行为例：

    
    
    
    
    
    


    读取样式
    


    

3.自定义getStyle方法

定义一个函数，用来获取指定元素的当前样式

     // 参数：obj:要获取样式的元素
     // name:要获取的样式名
    function getStyle(obj,name){
        if(window.getComputedStyle){
            //正常浏览器的方式，具有getComputedStyle()方法
            return getComputedStyle(obj,null)[name];
        }else{
            //IE8的方式，没有getComputedStyle()方法
            return obj.currentStyle[name];
        }