Mari kita bahas lagi tentang menambahkan aturan gaya secara dinamis

Dulu saya memberikan fungsi yang berguna dalam satu postingan blog , dan sudah banyak digunakan di beberapa postingan blog saya. Saya telah banyak membaca akhir-akhir ini, jadi saya menulis postingan blog ini untuk memilah hal-hal baru yang saya pelajari.

Tidak ada keraguan bahwa berdasarkan prinsip pemisahan kinerja dan struktur, mengimpor langsung style sheet baru adalah pilihan terbaik, namun dalam beberapa kasus tidak akan berhasil, misalnya, jika kita membuat DIV yang dapat diseret, dari perspektif mengatur gaya, itu Posisikan secara mutlak untuk mencegahnya mempengaruhi aliran dokumen asli, dan kemudian ubah nilai atas dan kirinya sedikit demi sedikit untuk mencapai efek pergerakan. Karena menyeret memiliki konsep waktu, 24 frame per detik, tidak mungkin untuk memasukkan semuanya ke dalam style sheet. Oleh karena itu, sangat penting untuk menghasilkan aturan gaya secara dinamis dan dengan cepat mengubah aturan gaya. W3C telah melakukan banyak pekerjaan untuk ini. Di DOM2.0, banyak antarmuka telah diperluas.

Untuk mengambil langkah mundur, pemisahan kinerja dan struktur tidak terbatas pada mengimpor style sheet. Tahukah Anda, ada tiga jenis gaya, gaya eksternal, gaya internal, dan gaya sebaris.

• Gaya eksternal, yang kami sebutkan di atas, ditulis dalam file CSS terpisah.
• Gaya internal ditulis secara independen dalam tag gaya, biasanya ditempatkan di tag kepala. Gaya yang dihasilkan oleh fungsi yang saya berikan terakhir adalah gaya internal.
• Gaya sebaris adalah gaya yang ditulis dalam atribut style elemen.

Antarmuka yang baru ditambahkan sebagian besar terkonsentrasi pada gaya eksternal - menurut saya antarmuka karena implementasi yang sesuai disediakan oleh browser. Orang sombong seperti IE6 tidak pernah mengabaikan keberadaannya.

Dalam model W3C, tag tautan dan tag gaya bertipe "teks/css" keduanya mewakili objek CSSStyleSheet. Kita bisa mendapatkan semua objek CSSStyleSheet di halaman saat ini melalui document.styleSheets, tetapi ini adalah kumpulan, bukan yang sederhana. susunan. Setiap objek CSSStyleSheet memiliki properti berikut,

• ketik: selalu mengembalikan string "teks/css".
• dinonaktifkan: Ini memiliki efek yang sama dengan input dinonaktifkan, dan defaultnya adalah salah.
• href: Mengembalikan URL, jika itu adalah tag gaya, itu adalah null.
• title: Mengembalikan nilai judulnya. Judulnya sama dengan judul elemen biasa.
• media: Hal-hal yang dikembalikan oleh IE dan Firefox tidak konsisten, jadi sulit untuk mengatakannya. media digunakan untuk menentukan perangkat mana yang valid untuk aturan gaya yang dimilikinya.
• ownerRule: Mengembalikan objek CSSRule read-only jika style sheet diperkenalkan dengan @import.
• cssRules: Mengembalikan kumpulan objek aturan gaya baca-saja (objek CSSStyleRule).

Objek aturan gaya (objek CSSStyleRule) dikembangkan oleh W3C untuk mengatur gaya secara lebih detail. Misalnya, hal berikut berhubungan dengan objek aturan gaya:

tombol[ketik] {
bantalan:4px 10px 4px 7px;
tinggi garis:17px;
}

Objek aturan gaya memiliki atribut utama berikut: type, cssText, parentStyleSheet, parentRule.

Tipe agak mirip dengan nodeType, yang membagi lagi aturan gaya. Tipe ini menggunakan bilangan bulat untuk mewakili tipenya. Situasi spesifiknya adalah sebagai berikut

• 0: Aturan CSS.UNKNOWN_RULE
• 1: CSSRule.STYLE_RULE (mendefinisikan objek CSSStyleRule)
• 2: CSSRule.CHARSET_RULE (mendefinisikan objek CSSCharsetRule, digunakan untuk mengatur kumpulan karakter dari style sheet saat ini, defaultnya sama dengan halaman web saat ini)
• 3: CSSRule.IMPORT_RULE (tentukan objek CSSImportRule, yang akan digunakan @import untuk memperkenalkan style sheet lainnya)
• 4: CSSRule.MEDIA_RULE (mendefinisikan objek CSSMediaRule, digunakan untuk mengatur apakah gaya ini digunakan untuk monitor, printer, proyektor, dll.)
• 5: CSSRule.FONT_FACE_RULE (mendefinisikan objek CSSFontFaceRule, @font-face CSS3)
• 6: CSSRule.PAGE_RULE (mendefinisikan objek CSSPageRule)

Tak perlu dikatakan lagi, cssText adalah atribut yang sangat berguna yang secara langsung mengubah string menjadi aturan gaya, mengabaikan perbedaan atribut gaya di setiap browser, seperti cssFloat dan styleFloat.

parentStyleSheet dan parentRule keduanya untuk @import. Namun, @import memiliki masalah di IE, jadi pada dasarnya saya tidak menggunakannya.