Bagaimanakah JavaScript Boleh Memanipulasi Lembaran Gaya CSS Secara Dinamik?

Memanipulasi Lembaran Gaya CSS dengan JavaScript

Selain mengubah gaya elemen individu, JavaScript boleh meluaskan jangkauannya untuk mengubah suai lembaran gaya CSS itu sendiri. Keupayaan berkuasa ini membolehkan pembangun melaraskan penampilan visual halaman web secara dinamik tanpa memuatkan semula halaman atau mencipta elemen gaya baharu.

Kaedah insertRule()

The insertRule () kaedah menyediakan pintu masuk untuk menyuntik peraturan baharu ke dalam lembaran gaya sedia ada. Ia memerlukan dua parameter: peraturan CSS (dalam format rentetan) dan indeks. Peraturan dimasukkan pada indeks yang ditentukan dalam lembaran gaya.

Contoh:

const stylesheet = document.styleSheets[0];
stylesheet.insertRule('#myElement { color: red; }', 0);

Kaedah deleteRule()

Untuk mengalih keluar peraturan daripada helaian gaya, gunakan kaedah deleteRule(). Ia menerima parameter indeks tunggal, yang menunjukkan kedudukan peraturan dalam lembaran gaya.

Contoh:

const stylesheet = document.styleSheets[0];
stylesheet.deleteRule(0);

Mengakses Peraturan melalui Atribut cssRules

Atribut cssRules bagi lembaran gaya memberikan akses kepada peraturan individu. Setiap peraturan diwakili sebagai objek CSSRule. Anda boleh melintasi peraturan menggunakan gelung dan mengubah suai sifatnya, seperti gaya, SelectorText dan pengisytiharan.

Contoh:

const stylesheet = document.styleSheets[0];
for (let i = 0; i < stylesheet.cssRules.length; i++) {
  const rule = stylesheet.cssRules[i];
  console.log(rule.selectorText);
  rule.style.color = 'blue';
  rule.style.backgroundColor = 'yellow';
  rule.style.fontSize = '20px';
}

Dengan memanfaatkan teknik ini, JavaScript meningkatkan fleksibiliti dan responsif aplikasi web dengan memanipulasi lembaran gaya CSS secara dinamik, membolehkan pengalaman pengguna yang disesuaikan dan pelarasan masa nyata tanpa memerlukan penyegaran halaman.

Atas ialah kandungan terperinci Bagaimanakah JavaScript Boleh Memanipulasi Lembaran Gaya CSS Secara Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!