JS控制div的属性

最新推荐文章于 2023-11-30 19:37:39 发布

sfanxi

最新推荐文章于 2023-11-30 19:37:39 发布

阅读量1k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_36366212/article/details/82864936

版权

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>控制div属性</title>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<style>
		#outer{
			width: 300px;
			margin:0 auto;
			text-align: center;
		}
		#inner{
			width: 100px;
			height: 100px;
			background:#000;
			margin: 0 auto;
			margin-top: 10px;
		}
	</style>

	<script>
		var changeStyle = function(elem,attr,value){
			elem.style[attr] = value;
			//元素elem的属性attr的样式style的取值为value
		};
		window.onload = function(){
			var oBtn = document.getElementsByTagName('input');//获取所有input元素
			var oDiv = document.getElementById('inner');
			var aAtt = ["width","height","background","display","display"];
			var aVal = ["200px","200px","red","none","block"];
			for(var i = 0; i < oBtn.length; i++){
				// alert(oBtn[i].index); 弹出undefined
				oBtn[i].index = i;
				oBtn[i].onclick = function(){
					
					this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
					//JS中if语句的替代，相当于
					//if（this.index == oBtn.length - 1）{
					//	oDiv.style.cssText = ""
					//cssText 的本质就是设置 HTML 元素的 style 属性值,此句相当于初始化oDiv.style
					//}
					changeStyle(oDiv, aAtt[this.index], aVal[this.index]);
				}
			}

		};
	</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="inner"></div>
</div>
</body>
</html>