JavaScript menggunakan if untuk menukar penukaran warna latar belakang-Soal Jawab bahagian hadapan-php.cn

JavaScript menggunakan if untuk menukar penukaran warna latar belakang

WBOY

Lepaskan： 2023-05-12 14:16:37

asal

905 orang telah melayarinya

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 ditambahkan pada teg 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>

Salin selepas log masuk

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>

Salin selepas log masuk

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';
}

Salin selepas log masuk

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>

Salin selepas log masuk

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';
  }
}

Salin selepas log masuk

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!

Salin selepas log masuk

Dalam keseluruhan fail HTML, kami menambahkan teg yang mengandungi fungsi toggleBackground() dan menambahkan elemen