原生Javascript实现控制DIV属性
写在前面:
从事前端工作已有一年之久,因为工作的性质,不太涉及JS方面,所以自己的JS水平一直处于小白阶段,工作闲暇之余,在网上找了一些小项目,希望练练手,促进自己成长。这是第一篇,后续还会有很多记录自己慢慢走过来的路程,文章纯属记录自己的所思所想,谨个人想法,存在不足,欢迎指正。
项目介绍:
从最简单的开始,在网上找到了一个简单的用JS控制DIV属性的小项目,咋一看很简单,自己动手之后才发现自己的代码之冗余和初阶,深深汗颜 - -。先写自己想法路程,然后把大牛源码奉上,涉及相关知识点一一记录。
项目截图:
刚看到项目时本以为就是简单的熟悉一下如何获取元素属性,写了之后发现大量的重复内容,看了源码之后才发现自己思维上的局限和自己代码的差劲- -。
不多说,上代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> body{ text-align: center; } div{ width: 100px; height: 100px; background: black; margin:20px auto; } </style> <body> <input type="button" value="变宽" /> <input type="button" value="变高" /> <input type="button" value="变色" /> <input type="button" value="隐藏" /> <input type="button" value="重置" /> <div id="div1"></div> <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> </body> </html>
以上实现代码涉及知识点于我而言两个部分,第一是属性用数组表示,并便利获取的思维方法,第二个就是&& 的用法,因为之前孤陋寡闻,从未接触过这个用法,查了资料后才明白。以下引用一段网上找到的解释&&和||在javascript中的另类用法:
a() && b() :如果执行a()后返回true,则执行b()并返回b的值;如果执行a()后返回false,则整个表达式返回a()的值,b()不执行;
a() || b() :如果执行a()后返回true,则整个表达式返回a()的值,b()不执行;如果执行a()后返回false,则执行b()并返回b()的值;
&& 优先级高于 ||
看完后就相当清楚了,再看看具体代码:
alert((1 && 3 || 0) && 4); //结果4 ① alert(1 && 3 || 0 && 4); //结果3 ② alert(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。
第三点就是关于cssText的运用:
var head= document.getElementById("head");
head.style.cssText="width:200px;height:70px;display:bolck";
和innerHTML一样,cssText很快捷且所有浏览器都支持。此外当批量操作样式时,cssText只需一次reflow。
但cssText也有个缺点,会覆盖之前的样式。使用该方法在IE9/Firefox/Safari/Chrome/Opera中没什么问题,但由于 IE6/7/8会少分号,所以如果需要兼容IE6/7/8的话,可以写个方法:
function setStyle(el, strCss){
function endsWith(str, suffix) {
var l = str.length - suffix.length;
return l >= 0 && str.indexOf(suffix, l) == l;
}
var sty = el.style,
cssText = sty.cssText;
if(!endsWith(cssText, ';')){
cssText += ';';
}
sty.cssText = cssText + strCss;
}
整体思路,先变量保存属性,然后写方法复用,遍历数组,添加方法,对重置的元素用&&判断并使用cssText方法。
感谢阅读,由于技术水平有限,内容大部分来自网络。