控制样式

最新推荐文章于 2024-08-03 21:02:21 发布

star walkin

最新推荐文章于 2024-08-03 21:02:21 发布

阅读量131

点赞数

文章标签： java

本文链接：https://blog.csdn.net/qq_44336097/article/details/110099932

版权

3. 控制元素样式
	1. 使用元素的style属性来设置。
		如：
			// 修改样式方式1
			div1.style.border = "1px solid red";
			div1.style.width = "200px";

			// font-size-->fontSize
			div1.style.fontSize = "20px";
	2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

<!DOCTYPE html>
<html>
<head>
	<title>控制样式</title>
	<style type="text/css">
		.d1{
			border: 1px solid red;
			width: 100px;
			height: 100px;
		}

		.d2{
			border: 1px solid red;
			width: 200px;
			height: 200px;
		}
	</style>
</head>
<body>

	<div id="div1">
		div1
	</div>

	<div id="div2">
		div2
	</div>

	<script type="text/javascript">
		var div1 = document.getElementById("div1");
		div1.onclick = function(){
			// 修改样式方式1
			div1.style.border = "1px solid red";
			div1.style.width = "200px";

			// font-size-->fontSize
			div1.style.fontSize = "20px";

		}

		var div2 = document.getElementById("div2");
		div2.onclick = function(){
			div2.className = "d1";
		}
	</script>

</body>
</html>

star walkin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
控制样式

3. 控制元素样式 1. 使用元素的style属性来设置。如： // 修改样式方式1 div1.style.border = "1px solid red"; div1.style.width = "200px"; // font-size-->fontSize div1.style.fontSize = "20px"; 2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。<!DOCTYPE html>&
复制链接

扫一扫