简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > js-Tutorial > Hauptteil

So ändern Sie die Hintergrundfarbe einer Webseite mit JavaScript

青灯夜游
Freigeben： 2022-10-12 17:17:03
Original
19536 Leute haben es durchsucht

Ä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.

So ändern Sie die Hintergrundfarbe einer Webseite mit JavaScript

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>
Nach dem Login kopieren

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

So ändern Sie die Hintergrundfarbe einer Webseite mit JavaScript

Ins Anweisungen:

1. In HTML muss sich der JavaScript-Code befinden zwischen den Tags

Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！