读取元素的样式 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
    <script>
        window.onload=function(){

            // 点击按钮以后读取box1的样式
            var box1=document.getElementById("box1");
            var btn01=document.getElementById("btn01");
            btn01.onclick=function(){
                // 读取box1的宽度
                // alert(box1.style.width);


                /* 
                    获取元素的当前显示的样式
                    语法：元素.currentStyle.样式名
                    它可以用来读取当前元素正在显示的样式
                    currentStyle只支持IE浏览器
                    如果当前元素没有设置该样式，则获取它的默认值

                    currentStyle只有IE浏览器支持，其他的浏览器不支持
                */

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

                需要两个参数
                    第一个：要获取样式的元素
                    第二个：可以传一个伪元素，一般都传null

                该方法会返回一个对象，对象中封装了当前元素对应的样式
                可以通过对象.样式名来读取样式
                如果获取的样式没有设置，则会获取到真实的值，而不是默认值
                比如：没有设置width，它不会获取到auto，而是一个长度
                但是该方法不支持IE8及以下的浏览器

                通过currentStyle和getComputedStyle()读取到的样式都是只读的，
                不能修改，如果要修改必须通过style属性
            */
                
            // var obj=getComputedStyle(box1,null);
            
            // 正常浏览器的方式
            alert(getComputedStyle(box1, null).width);

            // IE8的方式
            // alert(box1.currentStyle.width);

            // alert(getStyle(box1,"width"));
            };
        };

        /* 
            定义一个函数，用来获取指定元素的当前的样式
            参数：
                obj 要获取样式的元素
                name 要获取的样式名
        */

        /* function getStyle(obj,name){
            // 正常浏览器的方式
            // return getComputedStyle(obj,null)[name];

            // IE8的方式
            // return obj.currentStyle[name];
        } */
    </script>
</head>
<body>
    <button id="btn01">点我一下</button>
    <br/><br/>
    <div id="box1" style="width: 200px;"></div>
</body>
</html>

 

posted @ 2020-12-15 17:30  Hhhr  阅读(77)  评论(0)    收藏  举报