JavaScript melaksanakan kemahiran peraturan skim_javascript gaya CSS yang dibuat secara dinamik-tutorial js-php.cn

Terdapat banyak kod JavaScript dalam aplikasi web sekarang, dan kami sentiasa mencari pelbagai penyelesaian untuk menjadikannya lebih pantas.

1. Kami menggunakan delegasi acara untuk menjadikan pemantauan acara lebih cekap,
2. Kami menggunakan teknologi penyahlantunan fungsi untuk mengehadkan bilangan kali kaedah tertentu dipanggil dalam tempoh masa Sila rujuk: Cara mengelakkan pencetus frekuensi tinggi fungsi acara (terjemahan Cina. )
3. Kami menggunakan JavaScript loader untuk memuatkan sumber yang kami perlukan, dsb.

Terdapat satu lagi cara untuk menjadikan halaman kami lebih pantas dan cekap iaitu menambah dan memadam gaya tertentu secara dinamik dalam helaian gaya secara terus melalui JS, bukannya sentiasa menanyakan elemen DOM dan menggunakan pelbagai gaya. Begini cara ia berfungsi.

Dapatkan helaian gaya

Anda boleh memilih mana-mana helaian gaya untuk menambah peraturan gaya. Jika anda mempunyai helaian gaya tertentu, anda boleh menambah atribut ID pada teg atau dalam halaman HTML, dan kemudian dapatkan objek CSSStyleSheet secara terus melalui atribut helaian elemen DOM. Lembaran gaya juga boleh dilalui melalui document.styleSheets:

Salin kod Kod adalah seperti berikut:

// Kembalikan senarai gaya seperti tatasusunan StyleSheetList
helaian var = document.styleSheets;

/*
Nilai pulangan adalah serupa dengan yang berikut:

StyleSheetList
{
0: CSSStyleSheet,
1: CSSStyleSheet,
2: CSSStyleSheet,
3: CSSStyleSheet,
4: CSSStyleSheet,
panjang: 5,
Item: fungsi
}
*/

// Dapatkan helaian pertama, tanpa mengira atribut media
var sheet = document.styleSheets[0];

Perhatian khusus perlu diberikan kepada atribut media helaian gaya - apabila anda ingin memaparkannya pada skrin, anda pastinya tidak boleh menambah peraturan CSS pada helaian gaya cetakan. Anda boleh melihat lebih dekat pada maklumat sifat objek CSSStyleSheet:

Salin kod Kod adalah seperti berikut:

//Konsol mengeluarkan maklumat helaian gaya pertama
console.log(document.styleSheets[0]);

/*
Nilai pulangan:

CSSStyleSheet
cssRules: CSSRuleList[Object]
Dilumpuhkan: palsu
href: "http://davidwalsh.name/somesheet.css"
Media: MediaList[objek]
ownerNode: pautan[objek]
Peraturan pemilik: batal
parentStyleSheet: null
Peraturan: CSSRuleList[Object]
Tajuk: batal
Taip: "teks/css"
*/

//Dapatkan jenis media
console.log(document.styleSheets[0].media.mediaText)
/*
Nilai pulangan mungkin:
"semua" atau "cetak" atau media lain
digunakan pada helaian gaya ini */

Dalam setiap kes, anda pasti akan mempunyai cara untuk mendapatkan lembaran gaya yang anda ingin tambahkan peraturannya.

Buat helaian gaya baharu

Dalam banyak kes, pendekatan terbaik mungkin ialah mencipta elemen baharu untuk memegang peraturan dinamik ini. Ini juga sangat mudah:

Salin kod Kod adalah seperti berikut:

helaian var = (fungsi() {

// Cipta teg 