使用JavaScript原生控制div属性(2)

实现多重边框,使用outline方案。
在某些情况下,你可能只需要两层边框,可以先设置一层常规边框,再加上outline(描边)属性来产生外层的边框。描边的好处在于,你可以通过outline-offset属性来控制它跟元素的边缘之间的间距,这个属性可以接受负值。

2. JavaScript方法:

cssText()定义和用法:
cssText 属性设置或返回作为字符串的样式声明的内容。

this.index==oBtn.length-1 &&(oDiv.style.cssText="");
是指前半句this.index==oBtn.length-1为true时,执行下半句,也就是当遍历到重置按钮时,先清除之前添加的样式

tips:&&和||在javascript中的另类用法

a() && b() :如果执行a()后返回true,则执行b()并返回b的值;如果执行a()后返回false,则整个表达式返回a()的值,b()不执行;

a() || b() :如果执行a()后返回true,则整个表达式返回a()的值,b()不执行;如果执行a()后返回false,则执行b()并返回b()的值;

&& 优先级高于 ||

console.log((1 && 3 || 0) && 4); // 结果4 ① console.log(1 && 3 || 0 && 4); // 结果3 ② console.log(0 && 3 || 1 && 4); // 结果4 ③

分析
语句①:1&&3 返回3 => 3 || 0 返回 3 => 3&&4 返回 4
语句②:先执行1&&3 返回3,在执行0&&4返回0,最后执行结果比较 3||0 返回 3
语句③:先执行0&&3 返回0,在执行1&&4返回4,最后执行结果比较 0||4 返回 4

注:非0的整数都为true,undefined、null和空字符串”" 为false。

总结:

这算是最最基础的js练习了,模仿过一遍熟悉了通过js控制css样式改变。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/3a97b6121a4db302a0620d7239afd0c1.html