Heim >Web-Frontend >js-Tutorial >Drei Möglichkeiten, den CSS-Stil von Elementen mithilfe von Javascript (Code) zu ändern

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

不言Original: 2018-08-21 14:46:5420752Durchsuche

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>

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>

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>

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!

JavaScript css JS 对象

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einführung in gängige Methoden zum Abrufen von Elementanweisungen in js (mit Code)Nächster Artikel：Einführung in gängige Methoden zum Abrufen von Elementanweisungen in js (mit Code)

In Verbindung stehende Artikel

Mehr sehen