Bagaimana untuk menukar warna latar belakang halaman web dengan JavaScript-tutorial js-php.cn

Bagaimana untuk menukar warna latar belakang halaman web dengan JavaScript

青灯夜游

Lepaskan： 2022-10-12 17:17:03

asal

19759 orang telah melayarinya

Kaedah tukar: 1. Gunakan pernyataan "document.getElementsByTagName("body")" untuk mendapatkan nod elemen badan 2. Gunakan "node elemen badan.style.backgroundColor="color value";" pernyataan untuk menukar warna latar belakang halaman web.

Bagaimana untuk menukar warna latar belakang halaman web dengan JavaScript

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

JavaScript untuk menukar warna latar belakang halaman web

Contoh 1: Masukkan warna nama untuk menukar latar belakang halaman web Warna

Masukkan nama warna dalam kotak teks (seperti biru, ungu), klik butang di sebelah kotak teks untuk menukar latar belakang warna halaman web dengan nama dalam kotak teks warna yang sepadan.

Kod pelaksanaan

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

Salin selepas log masuk

Paparan rajah hasil

Sebelum pengubahsuaian:

Bagaimana untuk menukar warna latar belakang halaman web dengan JavaScript

Selepas pengubahsuaian:

Bagaimana untuk menukar warna latar belakang halaman web dengan JavaScript

Arahan:

1 HTML, kod JavaScript mesti diletakkan di antara teg

2. Dalam bahasa pengaturcaraan, pembolehubah digunakan untuk menyimpan nilai data. JavaScript menggunakan kata kunci var untuk mengisytiharkan pembolehubah. Tanda = digunakan untuk memberikan nilai kepada pembolehubah.

3 Cari elemen HTML

< td >document.getElementsByTagName(nama)

Kaedah

Penerangan<. /th>

document.getElementById(

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素

)

Cari elemen mengikut id elemen

Cari elemen mengikut nama teg

Contoh 2: Tukar warna latar belakang halaman web dengan mengklik butang (mudah)

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

Salin selepas log masuk

Kod

Keputusan paparan imej Bagaimana untuk menukar warna latar belakang halaman web dengan JavaScript

[Cadangan berkaitan: tutorial pembelajaran javascript

]

Atas ialah kandungan terperinci Bagaimana untuk menukar warna latar belakang halaman web dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!