js操作元素的样式

最新推荐文章于 2022-09-14 21:21:10 发布

原创最新推荐文章于 2022-09-14 21:21:10 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

23 篇文章

订阅专栏

博客介绍了JS操作元素样式的方法。一是通过style属性，可添加、修改或删除样式，操作的是HTML的style属性声明中的样式；二是通过className，能添加、修改或删除类选择器样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js操作元素样式</title>
		<style type="text/css">
			#showdiv{
				width: 200px;
				height: 200px;
				border: solid 1px;
			}
			.common{
				width: 200px;
				height: 200px;
				border: solid 1px;
			}
			.common2{
				width: 200px;
				height: 200px;
				border: solid 1px;
				background-color: aqua;
			}
			
		</style>
		<script type="text/javascript">
			//js操作元素样式
			  //js给元素操作样式--style
			  function testOperCss(){
			  	//获取元素对象
			  	var showdiv=document.getElementById("showdiv");
			  	//添加元素样式
			  	showdiv.style.backgroundColor="orange";
			  	//js修改元素样式
			  	showdiv.style.border="solid 2px red";
			  	//js删除样式
			  	showdiv.style.border="";
			  	
			  }
			
			//js操作样式--className
			function testOperCss2(){
				//获取元素对象
				var div01=document.getElementById("div01");
				//获取
				alert(div01.className);
				//添加或者修改
				div01.className="common2";
				//删除
				//div01.className="";
			}
			
			
			
		</script>
	</head>
	<body>
	<h3>js操作元素的样式</h3>
	<input type="button" name="" id="" value="测试操作元素样式-style" onclick="testOperCss();" />
	<input type="button" name="" id="" value="测试操作元素样式-className" onclick="testOperCss2();" />
	<hr />
	<div id="showdiv" style="border:solid 2px blue;"></div>
	<div id="div01"class="common"></div>
	</body>
</html>

js操作元素样式：
获取元素对象
通过style属性
元素对象名.style.样式名=“样式值”//添加或者修改
元素对象名.style.样式名=""//删除样式
注意:
以上操作，操作的是HTML的style属性声明中的样式。而不是其他css代码域中的样式。
通过className
元素对象名.className=“新的值”//添加类选择器样式或者修改类选择器样式
元素对象名.className=""//删除类样式。