Three ways to modify element css style with javascript (code)-JS Tutorial-php.cn

Three ways to modify element css style with javascript (code)

不言

Release： 2018-08-21 14:46:54

Original

20706 people have browsed it

This article brings you three methods (code) for modifying the CSS style of elements with JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

To modify the CSS style of an element, you usually add, delete, and modify it in the style attribute of the tag or the style tag in the header.

The following are three more practical ways to use JS to modify the css style of elements.

The first one: Get the javascript object .style corresponding to the corresponding tag and assign it

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.square{
				width: 300px;
				height: 300px;
				background: red;
			}
		</style>
	</head>
	<body>
		<p class=""></p>
		<script>
			//第一种:获取相应标签对应的 javascript对象. style
			(function(){
				var p= document. getElementsByTagName("p")[0];
				p.style.backgroundColor=red;
				p style. width= "300px";
				p style. height="300px";
			})();
		</script>
	</body>
</html>

Copy after login

The second one: Get the javascript object corresponding to the corresponding tag. className

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.square{
				width: 300px;
				height: 300px;
				background: red;
			}
		</style>
	</head>
	<body>
		<p class=""></p>
		<script>
			//第二种:获取相应标签对应的 javascript对象. className
			var p= document. getElementsByTagName("p")[0];
			p.className="square";
		</script>
	</body>
</html>

Copy after login

th Three types: through setAttribute("Attribute name", "Attribute value") [In a broader sense]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.square{
				width: 300px;
				height: 300px;
				background: red;
			}
		</style>
	</head>
	<body>
		<p class=""></p>
		<script>
			//第三种：通过setAttribute("属性名","属性值")
			var p= document. getElementsByTagName("p")[0];
			p.setAttribute("class","square");
			p.removeAttribute("class");
		</script>
	</body>
</html>

Copy after login

Related recommendations:

How to modify the css style of elements in iframe, No cross-domain_html/css_WEB-ITnose

JavaScript modifies css style style dynamically changes element style_javascript skills

The above is the detailed content of Three ways to modify element css style with javascript (code). For more information, please follow other related articles on the PHP Chinese website!