Ferris这个教程学习笔记:js示例1:控制div属性

 

//示例一:控制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>
View Code

 

posted @ 2013-12-11 15:35  kaka100  阅读(977)  评论(0)  编辑  收藏  举报