javascript - js,有几行代码不太明白?
本文介绍了javascript - js,有几行代码不太明白?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<!Doctype html>
<html lang="en>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>控制div属性</title>
<script>
var changeStyle = function(elem, attr, value) {
elem.style[attr] = value
};
window.onload = function() {
var oBtn = document.getElementsByTagName("input");
var oDiv = document.getElementById("div1");
var oAtt = ["width", "height", "background", "display", "display"];
var oVal = ["200px", "200px", "red", "none", "block"];
for (var i = 0; i < oBtn.length; i++) {
oBtn[i].index = i;
oBtn[i].onclick = function() {
this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
changeStyle(oDiv, oAtt[this.index], oVal[this.index])
}
}
};
</script>
</head>
<body>
<div id="outer">
<input type="button" value="变宽" />
<input type="button" value="变高" />
<input type="button" value="变色" />
<input type="button" value="隐藏" />
<input type="button" value="重置" />
<div id="div1"></div>
</div>
</body>
</html>
1.为什么要逻辑运算?
2.this.index 与 oDiv.style.cssText之间是怎么样的关系,能简单说一下吗?
解决方案
那句的意思是:如果点击的按钮是重置,则把 div1
元素的 cssText
清空。也就是重置了 div1
元素的初始状态(没有 style
值)。
&&
运算是从左向右执行的,只有当左边表达式为真时,才执行右边的表达式。在这里既当 this.index == oBtn.length - 1
,也就是点击的是最后一个按钮时,执行 oDiv.style.cssText = ""
。
这种写法不值得提倡,阅读性很差,不是一个好的写法。正常的写法是:
if(this.index === oBtn.length - 1) {
oDiv.style.cssText = ""
}
this.index
就是保存了按钮的序号,用于判断点击的是哪个按钮。在这里不能直接用 i
来表示,这是 JavaScript 一个著名的缺陷。
这篇关于javascript - js,有几行代码不太明白?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文