Home >Web Front-end >JS Tutorial >Three ways to modify element css style with javascript (code)

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

不言Original: 2018-08-21 14:46:5420738browse

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>

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>

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>

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!

JavaScript css JS 对象

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to common methods of obtaining element instructions in js (with code)Next article：Introduction to common methods of obtaining element instructions in js (with code)

See more

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

Related articles