2022/1/12，读取元素的样式-CSDN博客

本文链接：https://blog.csdn.net/weixin_44645655/article/details/122448721

            //获取元素当前显示的样式
            //语法：元素.currentStyle.样式名
            //可以读取当前显示的样式，只能用于ie浏览器，不能用其他
            //alert(box1.currentStyle.width);

            /*
            *其他浏览器中可以使用
            *   语法：getComputedStyle();
            * 需要传递两个参数
            *   第一个：要获取样式的元素
            *   第二个：可以传递一个伪元素，一般不用，null代替
            * 
            * 该方法会返回一个对象，对象中封装了当前元素对应的样式
            * 获取的样式没有设置，则他会获取到真实的值，而不是默认值
            *   比如：没有设置width,不会返回auto，而是一个长度
            */
            //正常浏览器方式
            //    var cp = getComputedStyle(box1,null);
            //    alert(cp.width);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>读取元素的样式</title>
    <style type="text/css">
        #box1 {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>

    <script type="text/javascript">
        window.onload = function () {

            //点击按钮后读取box1的样式
            var btn01 = document.getElementById("btn01");
            var box1 = document.getElementById("box1");
            btn01.onclick = function () {
                //获取元素当前显示的样式
                //语法：元素.currentStyle.样式名
                //可以读取当前显示的样式，只能用于ie浏览器，不能用其他
                //alert(box1.currentStyle.width);

                /*
                *其他浏览器中可以使用
                *   语法：getComputedStyle();
                * 需要传递两个参数
                *   第一个：要获取样式的元素
                *   第二个：可以传递一个伪元素，一般不用，null代替
                * 
                * 该方法会返回一个对象，对象中封装了当前元素对应的样式
                * 获取的样式没有设置，则他会获取到真实的值，而不是默认值
                *   比如：没有设置width,不会返回auto，而是一个长度
                */
                //正常浏览器方式
                //    var cp = getComputedStyle(box1,null);
                //    alert(cp.width);



                //ie8
                //alert(box1.currentStyle.width);

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



            };


        };

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

        function getStyle(obj, name) {

            if (window.getComputedStyle) {
                //正常浏览器
                return getComputedStyle(obj, name)[name];



            } else {
                //ie8
                return obj.currentStyle[name];
            }

        }


    </script>
</head>

<body>
    <button id="btn01">点我一下</button>
    <br><br>
    <div id="box1"></div>
    </div>
</body>

</html>