JavaScript boleh memanipulasi CSS Custom Properties (CSS Variables), mendapatkan nilai berubah melalui GetComputStyle () dan getPropertyValue (), dan mengemas kini nilai berubah menggunakan setProperty (). Langkah-langkah tertentu adalah seperti berikut: 1. Gunakan GetComputStyle (Element) .GetPropertyValue ('-Nama Variable') untuk mendapatkan nilai berubah, dan ambil perhatian bahawa anda perlu menggunakan trim () untuk menghapuskan ruang pada hasilnya; 2. Gunakan Element.Style.SetProperty ('-Variable-Name', 'New-value') untuk menetapkan nilai baru, yang boleh digunakan untuk global (seperti Document.documentElement) atau unsur-unsur tertentu; 3. Anda boleh menggabungkan animasi dan peralihan untuk mencapai kesan dinamik, tetapi anda perlu memberi perhatian kepada keserasian pelayar; 4. Apabila beroperasi, anda perlu memberi perhatian kepada warisan, skop dan sensitiviti kes pembolehubah. Penggunaan yang betul dapat merealisasikan fungsi interaktif seperti penukaran tema, susun atur dinamik, dan lain -lain.

JavaScript pasti boleh berinteraksi dengan sifat adat CSS (juga dikenali sebagai pembolehubah CSS). Ia bukan beberapa helah tersembunyi atau teknik canggih -ia mudah apabila anda memahami bagaimana pelayar mendedahkan nilai -nilai ini melalui DOM.

Mengakses pembolehubah CSS dari JavaScript

Anda boleh mendapatkan nilai pembolehubah CSS menggunakan getComputedStyle() dan kaedah getPropertyValue() . Ini amat berguna apabila anda ingin membaca nilai semasa pembolehubah, mungkin digunakan dalam logik atau animasi.

Contohnya:

 const root = document.documentElement;
const bgColor = getComputStyle (root) .getPropertyValue ('-bg-color');
console.log (bgColor.trim ()); // selalunya mempunyai ruang terkemuka/ketinggalan, jadi trimnya

Ini membolehkan anda mengakses mana -mana harta tersuai yang ditakrifkan pada elemen itu, walaupun ia diwarisi dari ibu bapa atau ditetapkan pada tahap :root :

Gotcha biasa: Sentiasa ingat untuk memangkas hasilnya , kerana getPropertyValue() sering mengembalikan nilai dengan ruang putih tambahan.

Mengemas kini pembolehubah CSS dengan JavaScript

Menukar nilai pembolehubah CSS dilakukan dengan menetapkan nilai baru secara langsung pada gaya elemen menggunakan setProperty() . Ini sangat berguna untuk perubahan UI yang dinamik seperti menukar tema, menyesuaikan susun atur berdasarkan input pengguna, dll.

Contoh:

 document.documenteLement.style.setProperty ('-bg-color', '#ff0000');

Baris itu mengemas kini pembolehubah --bg-color di seluruh dunia (dengan asumsi ia ditakrifkan pada :root ). Anda juga boleh menyasarkan elemen tertentu:

 document.QuerySelector ('. box'). style.setProperty ('-saiz teks', '1.5rem');

Perlu diingat bahawa ini hanya memberi kesan kepada gaya sebaris elemen tertentu, tidak semua contoh pembolehubah di tempat lain kecuali mereka mewarisinya.

Menggunakan pembolehubah CSS dalam animasi atau peralihan

Satu teknik yang kuat tetapi kurang digunakan ialah menggabungkan pembolehubah CSS dengan JavaScript untuk mengawal peralihan atau animasi. Sebagai contoh, anda mungkin mahu mengubah tema warna dengan lancar atau menyesuaikan jarak secara dinamik.

Inilah cara anda melakukannya dengan peralihan:

 : root {
  -Main-warna: #007BFF;
  Peralihan:-Main-warna 0.3s mudah;
}

Kemudian di JS:

 document.documentElement.style.setProperty ('-main-color', '#ff0000');

Ini berfungsi dalam pelayar yang paling moden, walaupun sedar: tidak semua pelayar menyokong peralihan pada pembolehubah CSS secara asli . Oleh itu, ketika kelihatan bersih, uji dengan teliti atau mengendalikan sandaran jika diperlukan.

Berhati -hati untuk Skop dan Cascade

Pembolehubah CSS mengikut peraturan skop dan warisan yang sama seperti CSS biasa. Jadi di mana anda menentukan perkara itu.

Jika anda menentukan pembolehubah di dalam .theme-dark , maka hanya kanak-kanak elemen itu akan melihat versi pembolehubah itu. Apabila anda mengaksesnya melalui JavaScript, pastikan anda menyasarkan elemen yang betul.

Juga, perlu diingat bahawa sifat tersuai adalah sensitif kes , jadi --MainColor dan --maincolor adalah berbeza.

Oleh itu, ketika bekerja dengan JS:

• Sentiasa menyemak semula elemen mana yang memegang pembolehubah.
• Selaras dengan penamaan.
• Gunakan alat dev untuk memeriksa gaya yang dikira jika perkara tidak berkelakuan seperti yang diharapkan.

Pada dasarnya itu sahaja.

Atas ialah kandungan terperinci Bagaimanakah JavaScript boleh berinteraksi dengan sifat tersuai CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!