您的位置：首页 > Web前端 > CSS

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

2017-10-25 20:06 671 查看
当我们再做一些节点的事件绑定的时候，往往会用到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不能获取对象准确的样式这一问题。

如果内容有误，请及时联系博主，谢谢。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript
相关文章推荐
新的分享
章节导航