DOM初探(20)——查询计算样式

脚本化CSS(二):
查询计算样式

     window.getComputdStyle(ele,null);

     计算样式只读

     返回的计算样式的值都是绝对值,没有相对单位

     IE8及以下不兼容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
    </head>
    <style>
        div{
            width: 200px;
        }
    </style>
    <body>
        <div style="height:100px;background-color:red;float:left;"></div>
        <script type="text/javascript">
            var div = document.getElementsByTagName("div")[0];
        </script>
    </body>
</html>

获取的是当前元素所展示的一切css的显示值,包括默认值。

第二个值为什么是nullnull能够解决伪元素的问题,用他就能获取伪元素的样式表!!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
        <style>
                div{
                    width: 100px;
                }
                div::after{
                    content: "";
                    width: 50px;
                    height: 50px;
                    background-color: green;
                    display: inline-block;
                }
        </style>
    </head>
    <body>
        <div style="height:100px;background-color:red;"></div>
        <script type="text/javascript">
            var div = document.getElementsByTagName("div")[0];
        </script>
    </body>
</html>

猜你喜欢

转载自blog.csdn.net/hdq1745/article/details/88167866