15前端基础 - JavaScript修改标签样式的属性值

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_20042935/article/details/88351107

JavaScript修改标签样式的属性值

修改界面上一个div的长宽,并使它一直变大

效果图:

在这里插入图片描述

变大:
在这里插入图片描述

代码如下:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<script>
			window.onload = function() {
				window.setInterval(changeStyle, 3000);

			}

			function changeStyle() {
				var divEle = document.getElementById("divEle");
				var height = divEle.style.height;			 //height -> 100px 需要转换
				var width = divEle.style.width; 			 //width -> 100px 需要转换
				height = parseInt(height) * 2;				 // height -> 转换后乘以2,200
				width = parseInt(width) * 2;			     //width -> 转换后乘以2,200
				divEle.style.height = height + "px";		 //记得加上单位“px”
				divEle.style.width = width +"px";

			}
		</script>

	</head>

	<body>
		<div id="divEle" style="height: 100px; width: 100px; background-color: red;"></div>

	</body>

</html>

猜你喜欢

转载自blog.csdn.net/qq_20042935/article/details/88351107