首页 > 代码库 > 控制div的属性
控制div的属性
<!doctype html><html lang="es"> <head> <meta charset="utf-8"> <title>HTML5</title> <link rel="stylesheet" href=http://www.mamicode.com/"styles.css" /> <style type="text/css"> #outer{ text-align:center; } #div1 { width:200px; height:200px; background:black; display:block; margin:10px auto; } </style> <script type="text/javascript"> var changeStyle = function (ele,att,val){ ele.style[att]=val; } window.onload = function(){//文档加载时给button赋值 try{ var btn = document.getElementsByTagName("button"); var div1 = document.getElementById("div1"); var att = ["width","height","background","display","display"]; var val = ["300px","300px","red","none","block"]; for(var i=0;i<btn.length;i++){ btn[i].index = i;//给每个button赋值，相当于每个button的id btn[i].onclick = function(){ this.index==btn.length-1&&(div1.style.cssText=""); //this相当于被onclick时的button,有一个变量index， //a==b&&c=d ->if(a==b)c=d; //style.cssText它是一组样式属性及其值的文本表示,等于空之后相当于去掉style样式 changeStyle(div1,att[this.index],val[this.index]); } } } catch(err){ alter(err.message); } } </script> </head> <body> <div id="outer"> <button >变宽</button> <button >变高</button> <button >变色</button> <button >隐藏</button> <button >重置</button> </div> <div id="div1" > </div> </body></html>
控制div的属性
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。