JS基础(获取元素样式)

获取元素的当前显示的样式
语法:元素.currentStyle.样式名
它可以用来读取当前元素正在显示的样式
currentStyle只有IE浏览器支持,其他的浏览器都不支持

在其他浏览器中可以使用
getComputedStyle()这个方法来获取元素当前的样式
这个方法是window的方法,可以直接使用

需要两个参数

getComputedStyle(要获取样式的元素,伪元素)

第一个:要获取样式的元素

第二个:可以传递一个伪元素,一般都传null

该方法会返回一个对象,对象中封装了当前元素对应的样式

可以通过对象.样式名来读取样式

如果获取的样式没有设置,则会获取到真实的值,而不是默认值

比如:没有设置width,它不会获取到auto,而是一个长

通过currentstyle和getComputedStyle()读取到的样式都是只读的,

不能修改,如果要修改必须通过style属性

没有定义的同时没指定对象浏览器为把这个值当成变量,变量未定义会报错,

而给了对象这个值就是属性,属性未定义就是undefined

获取对应元素样式的兼容性代码:

        <style>
            #box1{
                 100px;
                height: 100px;
                background-color: red;
            }
        </style>
        <script>
            window.onload=function(){
                var box1=document.getElementById('box1');
                /*
                 *定义一个函数,用来获取指定元素的当前的样式
                 * 参数:obj
                 *        要获取样式的元素
                 *        name
                 *        要获取的样式名
                 */
                function getStyle(obj,name){
                    // if(window.getComputedStyle)
                    // {
                    //     //正常浏览器的方式,具有getComputedStyle()方法
                    //     return getComputedStyle(obj,null)[name];
                    // }
                    // else
                    // {
                    //     //IE8的方式,没有getComputedStyle()方法
                    //     return obj.currentStyle[name];
                    // }
                    return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
                }
                alert(getStyle(box1,"width"));
            }
        </script>
    </head>
    <body>
        <div id="box1"></div>
    </body>
原文地址:https://www.cnblogs.com/MDZZZ/p/12497407.html