Heim > Artikel > Web-Frontend > So ändern Sie die Hintergrundfarbe einer Webseite mit JavaScript

So ändern Sie die Hintergrundfarbe einer Webseite mit JavaScript

青灯夜游Original: 2022-01-18 18:57:5719544Durchsuche

Änderungsmethode: 1. Verwenden Sie die Anweisung „document.getElementsByTagName(„body“)“, um den Körperelementknoten abzurufen. 2. Verwenden Sie die Anweisung „body element node.style.backgroundColor="color value";“. Hintergrundfarbe der Webseite.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

JavaScript zum Ändern der Hintergrundfarbe der Webseite

Beispiel 1: Geben Sie den Farbnamen ein, um die Hintergrundfarbe der Webseite zu ändern

Geben Sie den Namen der Farbe ein (z Klicken Sie in einem Textfeld auf die Schaltfläche neben dem Textfeld, um die Hintergrundfarbe der Webseite in die Farbe zu ändern, die dem Namen im Textfeld entspricht.

Implementierungscode

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页变色</title>
  <script type="text/javascript">
	function show(){
		var x=document.getElementsByTagName("body");
		var y=document.getElementById("i1"); 
		var c1=document.getElementById("i2").value;   <!--获取文本框中的值-->
 
		var c2;
		switch(c1){                              
			case &#39;蓝色&#39;: c2="blue"; break;
			case &#39;黄色&#39;: c2="yellow";break;
			case &#39;浅蓝色&#39;:c2="lightblue";break;
			case &#39;紫色&#39;:c2="purple";break;
			case &#39;粉色&#39;:c2="pink";break;
		}
		y.style.backgroundColor=c2;
	}
  </script>
</head>
 
<body id="i1"  style="background-color:#D6A4E9">  <!-- 网页的原始背景色-->
   <div align="center">
   	<input type="text" id="i2">
	<input type="button" value="改变颜色" onclick="show()">
   </div>
    
</body>
</html>

Ergebnisbildanzeige

Vor der Änderung:

So ändern Sie die Hintergrundfarbe einer Webseite mit JavaScript

Nach der Änderung:

So ändern Sie die Hintergrundfarbe einer Webseite mit JavaScript

Ins Anweisungen:

1. In HTML muss sich der JavaScript-Code befinden zwischen den Tags <script> </script>

2. In Programmiersprachen werden Variablen zum Speichern von Datenwerten verwendet. JavaScript verwendet das Schlüsselwort var, um Variablen zu deklarieren. Das =-Zeichen wird verwendet, um einer Variablen einen Wert zuzuweisen. 3. Suchen Sie HTML-Elemente document.getElementsByTagName(

name

) Elemente nach Tag-Namen suchen

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>改变网页背景色</title>
<script>
	function color(str){
		document.body.style.backgroundColor=str;
	}
 
</script>
</head>
	<input type="button" value="粉红色" onclick="color(&#39;pink&#39;)"/>
	<input type="button" value="紫色" onclick="color(&#39;purple&#39;)"/>
	<input type="button" value="蓝色" onclick="color(&#39;blue&#39;)"/>
	<input type="button" value="自定义颜色" onclick="color(&#39;lightblue&#39;)"/>
<body>
</body>
</html>

Ergebnisbildanzeige【Verwandte Empfehlungen: 】

	Beispiel 2: Ändern Sie die Hintergrundfarbe der Webseite durch Klicken auf eine Schaltfläche (einfach)
Code
	Javascript-Lern-Tutorial

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Hintergrundfarbe einer Webseite mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：So ermitteln Sie die Summe von 1-n in JavascriptNächster Artikel：So ermitteln Sie die Summe von 1-n in Javascript

In Verbindung stehende Artikel

Mehr sehen