通过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]
                    }

 

你可能感兴趣的:(通过js读取元素的样式)