首页 > 代码库 > 拿到内存中dom元素的最后样式进行修改obj下的currentStyle方法

拿到内存中dom元素的最后样式进行修改obj下的currentStyle方法

2024-08-20 16:36:53   220人阅读

　　在用dom操作在对页面中的<style></style>里的样式进行操作时，发现时无效的，我觉得是因为页面DOM解析时此标签的样式内容才会被读到内存中，因此JS操作时取不到此标签的内容

　　一个标签的样式有可能是多个样式文件所定义而成了，所以浏览器在解释标签的时候会有一个计算标签最后样式的过程，想要对<style>中定义格式的标签的样式进行修改必须去操作最后浏览器计算机计算出的样式，这里用obj下的currentStyle方法，具体测试如下：

<html>
<style type="text/css">
    div{
        width: 300px;
        height: 300px;
        border-bottom: 1px solid black;

    }
    .test1{

        background: red;
    }
    .test2{

        background: green;
    }

</style>

<script type="text/javascript" >


    function getStyle(obj,attr){
        return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,null)[attr];
        //return getComputedStyle(obj,null)[attr];
    }
    function t(){

        var m = document.getElementsByTagName(‘div‘)[0];
        
        console.log(m);
        console.log(m.className);
        if (!m.className.indexOf(‘test1‘)) {
            m.className = ‘test2‘;
            //alert(m.style.width);

        }else{
            m.className = ‘test1‘;
            
        }

            //alert(getStyle(m,‘width‘));
            //return;
            getStyle(m,‘width‘) = parseInt(getStyle(m,‘width‘)) + 5;
            m.style.height = parseInt(getStyle(m,‘height‘)) + 5;
            m.style.borderBottom = parseInt(getStyle(m,‘borderBottom‘)) + 1;

    }

</script>
<div class="test1" onclick="t();"  >
    这是一个特效
</div>
</html>

　　用到三元运算符因为IE6只有

getComputedStyle(obj,null)[attr]

　　这样就可以对样式进行操作了。

拿到内存中dom元素的最后样式进行修改obj下的currentStyle方法


联系
我们