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

最新推荐文章于 2022-10-25 10:42:22 发布

杨林伟

最新推荐文章于 2022-10-25 10:42:22 发布

阅读量1.2k

点赞数 1

分类专栏： # 前端基础

本文链接：https://blog.csdn.net/qq_20042935/article/details/88351107

版权

前端基础专栏收录该内容

70 篇文章 3 订阅

订阅专栏

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>