Bolehkah JavaScript Mengubah Suai Secara Dinamik Keseluruhan Lembaran Gaya CSS?

Mengubah suai Lembaran Gaya CSS Secara Dinamik dengan JavaScript

Bolehkah JavaScript digunakan untuk mengubah suai lembaran gaya CSS, bukan hanya gaya elemen individu?

Penyelesaian

Ya, adalah mungkin untuk ubah suai lembaran gaya CSS menggunakan JavaScript dalam penyemak imbas moden, termasuk IE9 dan ke atas. Fungsi ini menjangkau lebih daripada sekadar menukar gaya elemen dan membolehkan anda mengubah lembaran gaya itu sendiri.

Kaedah untuk Pengubahsuaian Lembaran Gaya

Terdapat tiga kaedah JavaScript utama untuk mengubah suai lembaran gaya :

• insertRule(): Menambah peraturan baharu ke helaian gaya secara dinamik.
• deleteRule(): Mengalih keluar peraturan sedia ada daripada helaian gaya.
• cssRules: Menyediakan akses kepada peraturan dalam lembaran gaya.

Contoh

Untuk menggambarkan proses, pertimbangkan coretan kod berikut:

// Get the stylesheet
var stylesheet = document.styleSheets[0];

// Insert a new rule at the end of the stylesheet
stylesheet.insertRule("#my-element { color: red; }", stylesheet.cssRules.length);

// Print the newly added rule
console.log(stylesheet.cssRules[stylesheet.cssRules.length - 1]);

Dalam contoh ini, satu peraturan ditambahkan pada lembaran gaya, menetapkan warna elemen dengan kelas "elemen saya" kepada merah.

Atas ialah kandungan terperinci Bolehkah JavaScript Mengubah Suai Secara Dinamik Keseluruhan Lembaran Gaya CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!