Bagaimana untuk menukar sifat css dalam js

JavaScript (JS) ialah bahasa pengaturcaraan yang digunakan untuk mereka bentuk halaman web interaktif dan tapak web dinamik. JS boleh mengakses dan mengendalikan elemen dalam halaman HTML melalui DOM (Document Object Model). Artikel ini terutamanya memperkenalkan cara menggunakan JS untuk menukar sifat CSS.

1 Dapatkan elemen
Sebelum menukar sifat CSS, anda perlu mendapatkan elemen untuk dikendalikan. Anda boleh mendapatkan elemen dengan ID elemennya menggunakan kaedah document.getElementById() atau dengan pemilih CSS menggunakan kaedah document.querySelector().

Contohnya:
Kod HTML:

<div id="myDiv">Hello World!</div>

Kod JS:

var myDiv = document.getElementById("myDiv");

atau

var myDiv = document.querySelector("#myDiv");

kedua-dua baris kod akan mendapat elemen div yang mengandungi teks "Hello World!"

2. Tukar sifat CSS
Terdapat dua cara untuk menukar sifat CSS: menukar gaya secara langsung melalui atribut gaya atau menukar gaya melalui atribut kelas.

1. Tukar gaya terus
   Anda boleh menggunakan atribut gaya elemen untuk menukar gaya CSS Contoh berikut menukar warna latar belakang kepada merah:

   myDiv.style.backgroundColor = "red";

   Anda juga boleh menukarnya pada masa yang sama Pelbagai gaya:

   myDiv.style.backgroundColor = "red";
   myDiv.style.color = "white";

2. Melalui atribut kelas
   Dengan menukar atribut kelas, berbilang gaya boleh dipratakrifkan dalam Fail CSS, dan kemudian digunakan dalam JS melalui atribut kelas elemen. Sebagai contoh di bawah, tukar warna latar belakang kepada biru:
   Kod CSS:

   .blue-background {
     background-color: blue;
   }

   Kod JS:

   myDiv.className = "blue-background";

   Ini akan menukar warna latar belakang elemen div kepada biru.

3. Perubahan gaya yang dicetuskan oleh peristiwa
JS juga boleh mencetuskan perubahan gaya selepas pengguna melakukan operasi tertentu. Sebagai contoh di bawah, tukar warna teks kepada hijau apabila tetikus melayang di atas elemen:
Kod HTML:

<div id="myDiv">Hello World!</div>

Kod JS:

var myDiv = document.getElementById("myDiv");

myDiv.onmouseover = function() {
  myDiv.style.color = "green";
};

myDiv.onmouseout = function() {
  myDiv.style.color = "black";
};

Apabila tetikus sedang berlegar di atas elemen Apabila tetikus digerakkan, warna teks akan bertukar kepada hijau apabila tetikus menjauh, warna teks akan kembali kepada hitam.

Ringkasan:
Dengan menggunakan JS, anda boleh mengubah suai gaya elemen HTML dengan mudah untuk menjadikan tapak web lebih dinamik dan menarik. Menggunakan kaedah di atas, anda boleh menggunakan JS secara fleksibel untuk menukar gaya dalam reka bentuk tapak web untuk menjadikan halaman lebih pelbagai.

Atas ialah kandungan terperinci Bagaimana untuk menukar sifat css dalam js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!