Rumah > Artikel > hujung hadapan web > JavaScript menggunakan if untuk menukar penukaran warna latar belakang
JavaScript menggunakan if untuk menukar penukaran warna latar belakang
- WBOYasal
- 2023-05-12 14:16:37876semak imbas
JavaScript ialah bahasa pengaturcaraan peringkat tinggi yang digunakan secara meluas dalam pembangunan web. Javascript boleh digunakan untuk menukar gaya halaman web, termasuk mengubah suai warna, fon dan gaya elemen Artikel ini akan memperkenalkan cara menggunakan pernyataan if Javascript untuk menukar warna latar belakang.
1. Persediaan
Sebelum menggunakan Javascript, anda perlu memperkenalkannya terlebih dahulu ke dalam halaman HTML. Biasanya, teg 855348821b2e8f2cc4b633bf98f064df ditambahkan pada teg 93f0f5c25f18dab9d176bd4f6de5d30e untuk memperkenalkan fail Javascript adalah seperti berikut:
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="app">
<h1>Hello, world!</h1>
</div>
</body>
</html>Selain itu, kami juga memerlukan elemen halaman untuk dipaparkan. warna latar belakang. Dalam contoh ini, kami memilih elemen badan sebagai kawasan paparan warna latar belakang. Kod HTML adalah seperti berikut:
<body>
<div id="app">
<h1>Hello, world!</h1>
</div>
</body>2. Javascript melaksanakan penukaran warna latar belakang
Selepas memperkenalkan Javascript ke dalam halaman HTML, kita boleh menggunakan Javascript untuk mengawal gaya elemen halaman. Dalam contoh ini, kita boleh menggunakan Javascript untuk mengubah suai warna latar belakang elemen badan. Anda boleh menggunakan pernyataan if untuk menukar warna latar belakang.
Kod sampel adalah seperti berikut:
var body = document.querySelector('body');
if (body.style.backgroundColor === 'white') {
body.style.backgroundColor = 'black';
} else {
body.style.backgroundColor = 'white';
}Analisis kod:
Pertama, kami menggunakan document.querySelector('body') untuk mendapatkan elemen badan. Fungsi ini mengembalikan rujukan kepada elemen, yang boleh dimanipulasi menggunakan badan dalam kod.
Kemudian, kami menggunakan pernyataan if untuk menentukan sama ada warna latar belakang semasa adalah putih. Jika warna latar belakang semasa adalah putih, tetapkan warna latar belakang kepada hitam jika tidak, tetapkan warna latar belakang kepada putih.
3. Gunakan butang untuk mencetuskan penukaran warna latar belakang
Sekarang, kami telah melaksanakan pernyataan if Javascript untuk menukar warna latar belakang. Walau bagaimanapun, jika pengguna ingin menukar warna latar belakang dengan lebih mudah, kami boleh menambah butang untuk mencetuskan penukaran warna latar belakang. Ini boleh dicapai dengan menambah elemen butang yang terkandung dalam HTML.
Kod sampel HTML adalah seperti berikut:
<button onclick="toggleBackground()">Click me!</button>
Kami menambah elemen butang dan menggunakan atribut onclick untuk menentukan fungsi toggleBackground() untuk dipanggil apabila butang diklik.
Kita perlu menambah fungsi yang dipanggil toggleBackground(), kodnya adalah seperti berikut:
function toggleBackground() {
var body = document.querySelector('body');
if (body.style.backgroundColor === 'white') {
body.style.backgroundColor = 'black';
} else {
body.style.backgroundColor = 'white';
}
}Fungsi ini adalah sama seperti kod sampel sebelumnya, ia menggunakan pernyataan if untuk menukar latar belakang warna. Apabila butang diklik, fungsi ini akan dipanggil dan warna latar belakang akan bertukar kepada warna lain.
4. Pelaksanaan kod lengkap
Berikut ialah kod halaman HTML lengkap, yang boleh disalin terus ke dalam editor untuk digunakan.
<script>
function toggleBackground() {
var body = document.querySelector('body');
if (body.style.backgroundColor === 'white') {
body.style.backgroundColor = 'black';
} else {
body.style.backgroundColor = 'white';
}
}
</script>
<button onclick="toggleBackground()">Click me!</button>
Hello, world!
Dalam keseluruhan fail HTML, kami menambahkan teg 855348821b2e8f2cc4b633bf98f064df yang mengandungi fungsi toggleBackground() dan menambahkan elemen bb9345e55eb71822850ff156dfde57c8 warna . Apabila butang diklik, fungsi toggleBackground() akan dipanggil dan warna latar belakang akan bertukar kepada warna lain.
Artikel ini memperkenalkan cara menggunakan pernyataan if Javascript untuk menukar warna latar belakang. Pada masa yang sama, kami juga menunjukkan kepada anda cara menggunakan elemen 07cb10094d7fc1aeafbde86dbf86ce42 dalam halaman HTML untuk mencetuskan penukaran warna latar belakang. Jika anda ingin mencapai kesan interaktif yang lebih kompleks melalui Javascript, anda boleh mempelajari bahasa ini secara mendalam untuk menjadikan halaman web anda lebih hidup dan menarik.
Atas ialah kandungan terperinci JavaScript menggunakan if untuk menukar penukaran warna latar belakang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!