Drei Möglichkeiten, den CSS-Stil von Elementen mithilfe von Javascript (Code) zu ändern-js-Tutorial-php.cn

Drei Möglichkeiten, den CSS-Stil von Elementen mithilfe von Javascript (Code) zu ändern

不言

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

Original

20666 Leute haben es durchsucht

In diesem Artikel geht es um drei Methoden (Code) zum Ändern des CSS-Stils von Elementen. Ich hoffe, dass er für Freunde hilfreich ist.

Um den CSS-Stil eines Elements zu ändern, fügen Sie es normalerweise im Stilattribut des Tags oder im Stil-Tag im Header hinzu, löschen und ändern es.

Im Folgenden finden Sie drei weitere praktische Möglichkeiten, JS zum Ändern des CSS-Stils von Elementen zu verwenden.

Der erste: Holen Sie sich das Javascript-Objekt .style, das dem entsprechenden Tag entspricht, und weisen Sie es zu

<!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>

Nach dem Login kopieren

Der zweite: Holen Sie sich das Javascript-Objekt, das dem entsprechenden Tag entspricht 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>

Nach dem Login kopieren

Drei Typen: über setAttribute("Attributname", "Attributwert") [Im weiteren Sinne]

<!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>

Nach dem Login kopieren

Verwandte Empfehlungen:

So ändern Sie den CSS-Stil Anzahl der Elemente im Iframe, kein Cross-Domain_HTML/CSS_WEB-ITnose

JavaScript ändert den CSS-Stilstil und ändert dynamisch die Elementstil_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonDrei Möglichkeiten, den CSS-Stil von Elementen mithilfe von Javascript (Code) zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!