JS基础-获取元素的样式-CSDN博客

本文链接：https://blog.csdn.net/linqunbin/article/details/90726396
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        #box1{
            width: 200px;
            min-height: 100px;
            background-color: brown;
        };
    </style>
    <script type="text/javascript">
        window.onload = function(){
            // 通过currentStyle和getComputedStyle()读取到的样式都是只读的,不能修改.
            // 如果要修改,必须通过style属性.
            var btn01 = document.getElementById('btn01');
            btn01.onclick = function(){
                var box1 = document.getElementById('box1');
                /*
                    获取元素的当前显示样式
                    语法:元素.currentStyle.样式名
                    它可以用来当前元素正在显示的样式
                    如果当前元素没有设置该样式,则获取它的默认值.

                    currentStyle只有IE游览器支持,其它游览器都不支持.
                */
                // alert(box1.currentStyle.width);

                /*
                    在其它游览器中,可以使用:
                        getComputedStyle()这个方法来获取元素的样式
                        这个方法是window的方法,可以直接使用
                    需要2个参数:
                        第一个:要获取样式的元素
                        第二个:可以传递一个伪元素,一般都传null
                    该方法会返回一个对象,对象中封装了当前元素对应的样式
                        可以通过对象.样式名读取样式
                    如果获取的样式没有设置,则会获取到真实的值,而不是默认值
                    比如:没有设置width,它不会获取到auto,而是一个长度
                */
                // var obj = getComputedStyle(box1, null);
                // alert(obj.width);

                alert(getStyle(box1, 'width'));

            };
        };
        /*
            定义一个函数,用来获取指定元素的当前样式
            参数:
                obj 要获取样式的元素
                name 要获取的样式名
        */
        function getStyle(obj, name){
            // 这里要加window,如果游览器没有找到变量会报错,如果没有找到对象的属性,则是undefined.
            if (window.getComputedStyle){
                // 正常游览器的方式,具有getComputedStyle()方法.
                return getComputedStyle(obj, null)[name];
            }else{
                // IE8的方式,没有getComputedStyle()方法
                return obj.currentStyle[name];
            }
        }
    </script>
</head>
<body>
    <button id="btn01">点我</button>
    <div id="box1">

    </div>
</body>
</html>