javascript操作内联样式和获取元素当前样式以及兼容性问题

在使用dom操作内联样式和当前样式时，需要注意的问题很多
特别是浏览器的兼容性问题

首先是操作内联样式‘先来看看简单的例子代码

    <script type="text/javascript">
        window.onload=function(){
     
     
            //点击按钮修改box1大小

            //获取box1
            var box1 = document.getElementById("box1");
            
            var btn1 = document.getElementById("btn1");
            btn1.onclick=function(){
     
     
        //在这之中通过语法：元素.style.样式名=样式值;来修改内联样式
                box1.style.width="250px";
                alert(box1.style.width);
            }

            //读取样式
            var btn2=document.getElementById("btn2");
            btn2.onclick=function(){
     
     
        //通过语法：元素.style.样式名;来读取内联样式
            }
        }
    </script>

这是一个通过点击按钮修改元素属性的代码，浅显易懂
但要注意类似于background-color之类的属性要使用驼峰书写
即backgroundColor

样式中也尽量不要出现！important，优先级过高会导致js代码无法读取内联样式。

第二个就是获取当前样式啦，这个细节比较多
先上代码：

    <script type="text/javascript">
        window.onload=function(){
     
     
            var box1 = document.getElementById("box1");
            
            var btn1 = document.getElementById("btn1");
            btn1.onclick=function(){
     
     
        //在这之中通过语法：元素.currentStyle.样式名=样式值;来查看当前显示的样式,只兼容ie
               
                //alert(box1.currentStyle.width);

            //兼容其他浏览器，则使用getComputedStyle()
            //两个参数，一个是元素，一个是null
            alert(getComputedStyle(box1,null).width);
            }
      </script>

这里就出现了两个方式：
1.currentStyle属性（只兼容ie）555，ie终于争气了一回
语法在代码注释中也很清楚

2.getComputedStyle( )方法，兼容其他浏览器
这个方法的返回值是一个对象，封装了当前元素的对应样式
语法在代码注释里有

但是，如果想要任何浏览器都兼容的话，那怎么办呢？
这个时候就需要我们自己来写一个函数
废话不多说，上代码

    <script type="text/javascript">
           //兼容所有浏览器，自己写一个函数
            //参数：obj 需要获取的样式元素  name 需要获取的样式名
            function getStyle(obj,name){
     
     
                if(window.getComputedStyle){
     
     
                    //必须用window.，因为后面那个属性是变量，全局作用域和局部作用域中都没有定义
                    return getComputedStyle(obj,null)[name];
                }else{
     
     
                    return obj.currentStyle[name];
                }
                    </script>

这个就是能兼容所有浏览器的方法啦，
有一些细节展示在了代码注释里
比如window.getComputedStyle前面必须要有window，否则会报错，因为浏览器引擎是从函数内搜到外，直到全局作用域，而这个getComputedStyle是一个变量，在全局作用域中没有定义。

另外值得一提的是，通过currentStyle和getComputedStyle（）获取的属性都是只读不修改的哦。