使用原生js获取的节点样式不能作为判断条件，封装获取节点样式方法

最新推荐文章于 2023-02-13 14:25:23 发布

crazyJialin

最新推荐文章于 2023-02-13 14:25:23 发布

阅读量722

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/crazy_jialin/article/details/78345906

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

当我们再做一些节点的事件绑定的时候，往往会用到if判断来控制节点的样式改变，所以，人们很容易的想到了如下方式：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>获取节点样式</title>
        <style>
            .div1{
                width:200px;
                height: 200px;
                background: tomato;
                opacity: 1;
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
    </body>
    <script>
        var oDiv1 = document.getElementsByClassName('div1')[0]; //获取节点
        oDiv1.onclick = function(){ //给节点绑定事件

            //使用判断控制点击节点的显示隐藏
            if(oDiv1.style.opacity == 1){
                oDiv1.style.opacity = 0;
            }else{
                oDiv1.style.opacity = 1;
            }
        };
    </script>
</html>

可是，这种方法会有一个bug，当第一次点击的时候，节点明明是显示状态，但是却没有隐藏，当点击第二次的时候才开始有显示和隐藏效果。为什么会出现这样的问题呢，其核心就一句话：通过obj.style+样式名称只能获取节点的行间样式，但是对于内嵌或者外联样式缺没有任何反应。因为通过对象节点打点调用的style，是指在节点标签内添加名为“style”的属性，然后在这个属性中添加对应的值。所以，当点击第一次的时候，因为节点没有行间样式，所以，我们获取到的oDiv1.style.opacity值为空（不是1也不是0），所以执行了else语句里边的语句，就出现了之前所诉的问题。

下面，我们将自己封装一个方法，用来获取节点的最终样式（指节点最终显示的效果）。

/**
* 参数1，对象        ->需要获取样式的节点对象
 * 蚕食2 ，字符串 ->需要获取对应节点的样式名
 * 返回值，字符串  ->获取对应样式的值（带单位）
 * */
function getStyle(obj,attr){
    // ie，Opera --- obj.currentStyle[attr], FF，Chrome，Safari--- getComputedStyle(obj)[attr]
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}

getComputedStyle是挂在到window对象下边的一个方法，参数值为需要查询样式的对象，返回对应对象所有的样式（json对象），然后我们再通过访问对象属性的方式来获取对象的样式值。但是IE和Opera中对应的函数为currentStyle,是挂在到每个对象原型下的方法,同样返回该对象所有样式的对象。

如此一来，我们便可以通过这个方法来直接获取对应节点的样式。Js部分代码修改为：

oDiv1.onclick = function(){ //给节点绑定事件
    //使用判断控制点击节点的显示隐藏
    if(getStyle(this,'opacity') == 1){
        oDiv1.style.opacity = 0;
    }else{
        oDiv1.style.opacity = 1;
    }
};

这样，就解决了通过obj.style不能获取对象准确的样式这一问题。

如果内容有误，请及时联系博主，谢谢。

crazyJialin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用原生js获取的节点样式不能作为判断条件，封装获取节点样式方法

当我们再做一些节点的事件绑定的时候，往往会用到if判断来控制节点的样式改变，所以，人们很容易的想到了如下方式：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>获取节点样式</title> <style> .div1{
复制链接

扫一扫

专栏目录