DOM初探(21)——查询样式(IE独有的)

脚本化CSS(三):

查询样式(IE独有的)

     ele.currentStyle

     计算样式只读

     返回的计算样式的值不是经过转换的绝对值

     IE独有的属性

练习43:封装兼容性方法getStyle(ele,prop)

<!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];
            function getStyle(elem,prop) {
                if(window.getComputedStyle){
                    return window.getComputedStyle(elem,null)[prop];
                }else{
                    return elem.currentStyle[prop];
                }
            }
        </script>
    </body>
</html>

一种新的编程思想:不改变伪元素,直接改变类名

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

猜你喜欢

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