HTML初学日记2018/5/2

最新推荐文章于 2022-12-26 15:22:10 发布

原创最新推荐文章于 2022-12-26 15:22:10 发布 · 163 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用HTML、CSS及JavaScript实现的简单示例，通过按钮点击改变页面中DIV元素的宽度、高度、背景颜色及显示状态。利用getElementById和getElementsByTagName等方法获取DOM元素，并通过闭包和事件监听实现交互效果。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8" />
<title> 控制div属性</title>
<style>
#outer {
width: 500;
margin: 0 auto;
padding: 0;
text-align: center;
/*
margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right.因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）
* */
}
#div1{
width: 100px;
height: 100px;
background: black;
margin: 10px auto;
display: block;
/*
display: block: 此元素将显示为块级元素，此元素前后会带有换行符。
* */
}
</style>
<script>
var changeStyle = function(elem,attr,value)
{
elem.style[attr] = value
};
window.onload= function(){
var oBtn = document.getElementsByTagName("input");
/*获取input的value值*/
/*getElementsByTagName() 方法可返回带有指定标签名的对象的集合。*/
var oDiv = document.getElementById("div1");
/*返回对拥有指定 id 的第一个对象的引用。*/
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;

/*js为闭包*/

oBtn[i].onclick= function(){

this.index == oBtn.length - 1 &&(oDiv.style.cssText= "");

/*判断是不是最后一个“重置”按钮。当前面的比较为“true”时，会执行后面的语句，同样达到了if判断的效果。*/

/*通过赋值为“”，可以将元素上所有的行内样式清空，达到重置的效果*/

changeStyle(oDiv,oAtt[this.index],oVal[this.index])
}
}
};
/*
window.onload是一个事件，当文档内容完全加载完成会触发该事件。
* */
</script>
</head>
<body>
<div id="outer">
<input type="button" value="变宽" />
<input type="button" value="变高" />
<input type="button" value="变色" />
<input type="button" value="隐藏" />
<input type="button" value="重置" />
<div id="div1" style="width: 200px;height: 200px;"></div>
</div>
</body>
</html>