javascript - js，有几行代码不太明白？
问题描述
<!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.为什么要逻辑运算？2.this.index 与 op.style.cssText之间是怎么样的关系，能简单说一下吗？
问题解答
回答1：那句的意思是：如果点击的按钮是“重置”，则把 p1 元素的 cssText 清空。也就是重置了 p1 元素的初始状态（没有 style 值）。
&& 运算是从左向右执行的，只有当左边表达式为真时，才执行右边的表达式。在这里既当 this.index == oBtn.length - 1，也就是点击的是最后一个按钮时，执行 op.style.cssText = ''。
这种写法不值得提倡，阅读性很差，不是一个好的写法。正常的写法是：
if(this.index === oBtn.length - 1) { op.style.cssText = ''}
this.index 就是保存了按钮的序号，用于判断点击的是哪个按钮。在这里不能直接用 i 来表示，这是 JavaScript 一个著名的缺陷。
回答2：this.index == oBtn.length - 1 && (op.style.cssText = '');
表示：如果是最后一个btn的话，就执行后面的代码(op.style.cssText = ''),即清除样式
a==b&&code...
相当于if(a==b){code....}
个人不太喜欢这种写法。
2.this.index 与 op.style.cssText之间是怎么样的关系
this.index 是按钮的序号op.style.cssText = ''表示清除op的样式。
相关文章：
1. javascript - Js对象怎么通过value值拿到key值？2. javascript - js读取excel其中一列中的一个值是0.3556但是读出来是0.35559999999999997？3. javascript - js 在一段文字中的括号前面插入一个换行/4. javascript - JS中如何实现 DIV内部和鼠标的距离5. javascript - js一个call和apply的问题?6. javascript - js机制问题，是否都是等主线程执行完毕再执行异步，如果主线程有好几万行，或者上下文相关呢7. javascript - js scroll滑动靠近最顶部的条目显示在最顶部8. javascript - js对象 属性的访问和创建9. javascript - js怎样判断一个图片是不是base6410. javascript - js开发webapp遇到的ios键盘问题
网公网安备