<!Doctype html>
<html lang="en>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>控制p属性</title>
<script>
var changeStyle = function(elem, attr, value) {
elem.style[attr] = value
};
window.onload = function() {
var oBtn = document.getElementsByTagName("input");
var op = document.getElementById("p1");
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 && (op.style.cssText = "");
changeStyle(op, oAtt[this.index], oVal[this.index])
}
}
};
</script>
</head>
<body>
<p id="outer">
<input type="button" value="变宽" />
<input type="button" value="变高" />
<input type="button" value="变色" />
<input type="button" value="隐藏" />
<input type="button" value="重置" />
<p id="p1"></p>
</p>
</body>
</html>1. Mengapa kita memerlukan operasi logik?
2.Apakah hubungan antara this.index dan op.style.cssText? Bolehkah anda menerangkannya secara ringkas?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ayat itu bermaksud: Jika butang yang diklik ialah "Reset", kemudian tetapkan nilai
p1元素的cssText清空。也就是重置了p1元素的初始状态（没有style).&&运算是从左向右执行的，只有当左边表达式为真时，才执行右边的表达式。在这里既当this.index == oBtn.length - 1，也就是点击的是最后一个按钮时，执行op.style.cssText = "".Tulisan jenis ini tidak berbaloi untuk dipromosikan. Ia mempunyai kebolehbacaan yang lemah dan bukan cara penulisan yang baik. Cara biasa menulisnya ialah:
this.index就是保存了按钮的序号，用于判断点击的是哪个按钮。在这里不能直接用iuntuk menyatakan bahawa ini adalah kecacatan terkenal dalam JavaScript.bermaksud: jika ia adalah btn terakhir, laksanakan kod berikut
(op.style.cssText = ""), iaitu, kosongkan gayabersamaan dengan
if(a==b){code....}Secara peribadi saya tidak suka cara penulisan ini.
this.index ialah nombor siri butang
op.style.cssText = ""bermaksud mengosongkan gaya op.