Bagaimana untuk Mengubah Suai Pembolehubah CSS Dengan Betul Menggunakan JavaScript?

Cara Mengedit Pembolehubah CSS dengan JavaScript Menggunakan Style.setProperty

Dalam CSS, pembolehubah membenarkan anda mentakrifkan tema warna dan tetapan lain sekali dan gunakannya sepanjang projek anda. Untuk mengedit pembolehubah ini secara dinamik dengan JavaScript, anda mesti menggunakan kaedah yang sesuai.

Kaedah Salah:

Dalam kod anda, anda cuba mengemas kini pembolehubah CSS menggunakan setAttribute. Walau bagaimanapun, kaedah ini tidak sah untuk mengedit pembolehubah CSS.

Kaedah Betul:

Terdapat tiga kaedah yang betul untuk mengedit pembolehubah CSS dengan JavaScript:

1. documentElement.style.cssText:

   • Syntax: documentElement.style.cssText = "--variable-name: new-value"

2. documentElement.style.setProperty:

   • Sintaks: documentElement.style.setProperty("- -nama-pembolehubah", "new-value")

3. documentElement.setAttribute('style'):

   • Sintaks: documentElement.setAttribute ('style', "--variable-name: new-value")

Contoh:

Untuk menukar --main-background-color variable kepada merah:

document.documentElement.style.cssText = "--main-background-color: red";

Demo:

  
    
  

  
    <script>
      function changeColor() {
        setTimeout(() => {
          document.documentElement.style.cssText = &quot;--main-background-color: red&quot;;
        }, 2000);
      }
    </script>
  

Dalam ini demo, warna latar belakang akan bertukar kepada merah selepas 2 saat memuatkan halaman.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Suai Pembolehubah CSS Dengan Betul Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!