写在最前面:Demo的源起来自于http://js.fgm.cc/learn/,但是实现部分都是经过自己思考和优化的,有时会借助别人的图片,然而“窃喜”。如无特殊说明,demo都是经过ie6、ie7等低版本浏览器测试通过的。表要笑话我有“自虐”倾向,各种是有情节和情结的。力图做的专业再专业一点点。^_^
功能实现:单击响应的功能按钮实现DIV属性的切换
Demo地址:http://yuyingguo.sinaapp.com/jsStudy/控制div属性.html
有图有真相:
自己的代码实现:
(在这里书写的时候出现了点小插曲,又涨了点姿势——当我在js中试图用targetDiv.style.width获取宽度的时候,始终没有获取到,其实这是和css三种样式定义有关的:三种样式为:外联样式、内部样式、内联样式。)至于详情,可以移步到我的另外一篇博客:http://www.cnblogs.com/Iwillknow/p/3691492.html
<!doctype html> <html> <head> <style> #box { width: 500px; height: 300px; background: black; } </style> <script> window.onload = function() { var buttons = document.getElementsByTagName("button"); var targetDiv = document.getElementById("box"); var flag = 0; //表示可见 for(var i = 0;i < buttons.length;i++) { buttons[i].index = i; //解决闭包问题 buttons[i].onclick = function() { if(this.index === 0) { //变宽 targetDiv.style.width = "1000px"; }else if(this.index === 1) { //变高 targetDiv.style.height = "600px"; }else if(this.index === 2) { //变色 targetDiv.style.background = "red"; }else if(this.index === 3) { //隐藏 targetDiv.style.display = "none"; flag = 1; }else { //重置 targetDiv.style.display = "block"; flag = 0; } }; } }; </script> </head> <body> <button>变宽</button> <button>变高</button> <button>变色</button> <button>隐藏</button> <button>重置</button> <div id="box"></div> </body> </html>
以上代码可用性不高,并且代码重复,既然是样式设置是一个频繁的操作,完全可以提取出来成立一个函数呀~so
<html xmlns="http://www.w3.org/1999/xhtml"><head> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>控制div属性</title> <style> #div1{width:100px;height:100px;background:black;display:block;} </style> <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> <input type="button" value="变宽"> <input type="button" value="变高"> <input type="button" value="变色"> <input type="button" value="隐藏"> <input type="button" value="重置"> <div id="div1"></div> </body> </html>
代码简明了然,不过你可能需要好好理解一下这句代码:
(this.index == oBtn.length - 1) && (oDiv.style.cssText = "");
&&操作的三层理解和cssText的相关知识。前者可以参看《javascript的权威指南》、后者可以移步到http://www.cnblogs.com/Iwillknow/p/3691490.html
分析起来就是:根据 this.index == oBtn.length - 1,判读出是否单击了重置按钮;如果单击了重置按钮,需要清除之前通过 elem.style[attr] = value添加到内联中属性,以防元素是隐藏的,所以添加display: block,同时内部样式因为内联样式的清空,进行了应用,也就是得到了重置。
小小的一个demo,知识点也不少啊^_^