通过js读取元素的样式

/*
* 通过元素.style.样式只能获取到内联样式的值，就是style写在元素里面的值，不能获取嵌入式和外联样式的值
* 所以如果要获取除内联样式后的值，就不能通过这个获取
* alert(box1.style.height)
* 还有其他的形式，比如获取元素当前显示的样式，就是不管是外联还是嵌入式还是内联，谁显示就是获取谁的样式
* 语法：元素.currentStyle.样式名
* 他可以读取当前元素正在显示的样式
* alert(box1.currentStyle.width);
* 这个只有IE支持，其他浏览器都不支持。
* 在其他浏览器中可以使用getComputedStyle()这个方法来获取当前元素的样式
* 这个是window的方法，可以直接使用
* 语法：
* 需要两个参数：
* 第一个：要获取样式的元素
* 第二个：可以传递一个伪元素，一般都传null。
* 该方法会返回一个对象，对象中封装了当前元素对应的样式
* 可以通过对象.样式名来读取样式
* 如果获取的样式没有设置，则会获取到真实的值，而不是默认值
* 比如没有设置width，他不会获得auto，而是一个实际上的值。
* 而IE的话，不设置会默认auto
* 但是该方法不支持IE8及以下浏览器
* 如果为了兼容两个，那么就定义一个函数来兼容两个都可以，就是类似弄一个判断包含在里面
*

* 通过currentStyle和getComputedStyle（）读取到的样式都是只读的
* 不能修改，如果要修改必须通过style属性。
*/

　　　　　　　　　　　　function getStyle(obj,name){
                        //获取属性可以通过.，也可以通过中括号，这里.不适合，中括号才适合
                        //正常浏览器的方式，具有getComputedStyle方法
                        getComputedStyle(obj,null)[name]
                        //要加window，否则是个变量，到时候会报错
                        if(window.getComputedStyle){
                            return getComputedStyle(obj,null)[name]
                            
                        }else{
                            //IE浏览器，具有currentStyle方法
                            return obj.currentStyle[name]
                        }
                        //第二种方式可以通过三元运算符
                        window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name]
                    }

 

转载于:https://www.cnblogs.com/caicaihong/p/9341457.html