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

最新推荐文章于 2024-05-21 14:15:14 发布

weixin_33698043

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量72

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/kaka100/p/3469488.html

版权

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

转载于:https://www.cnblogs.com/kaka100/p/3469488.html

weixin_33698043

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ferris这个教程学习笔记:js示例1:控制div属性

//示例一:控制div属性//控制元素的样式属性有很多种方法//1:第一种// 元素.style.属性 = 值;//2:第二种// 元素.style["width"] = 值;//3:小知识点//清除元素的style属性所有值;//元素.style.cssText = ""<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Trans...
复制链接

扫一扫