//示例一:控制div属性
//控制元素的样式属性有很多种方法
//1:第一种
// 元素.style.属性 = 值;
//2:第二种
// 元素.style["width"] = 值;
//3:小知识点
//清除元素的style属性所有值;
//元素.style.cssText = ""
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>控制div属性</title> <style type="text/css"> #outer{width:500px;margin:0 auto;padding:0;text-align:center;} #div1{width:100px;height:100px;background:black;margin:10px auto;display:block;} </style> </head> <body> <div id="outer"> <input value="变宽" type="button" /> <input value="变高" type="button" /> <input value="变色" type="button" /> <input value="隐藏" type="button" /> <input value="重置" type="button" /> <div id="div1"></div> </div> <script type="text/javascript"> //示例一:控制div属性 //控制元素的样式属性有很多种方法 //1:第一种 // 元素.style.属性 = 值; //2:第二种 // 元素.style["width"] = 值; //3:小知识点 //清除元素的style属性所有值; //元素.style.cssText = "" window.onload = function(){ var inputs = document.getElementsByTagName("input"); var div = document.getElementById("div1"); var size = inputs.length; for(var i=0;i<size;i++){ inputs[i].onclick = function(){ if(this.value == "变宽"){ //div.style.width = "200px"; div.style["width"] = "300px"; }else if(this.value == "变色"){ div.style.backgroundColor = "red"; }else if(this.value == "变高"){ div.style.height = "200px"; }else if(this.value == "隐藏"){ div.style.display = "none"; }else if(this.value == "重置"){ div.style.cssText = ""; } }; } }; </script> </body> </html>