Baru -baru ini, saya sedang mengerjakan sebuah proyek dan membutuhkan JavaScript untuk memasukkan gaya secara dinamis, tetapi metode sebelumnya gagal! Alasan saya memeriksa selama 2 jam adalah karena saya adalah orang yang slutty. Mari kita bicarakan ini di akhir!
Gaya penyisipan JavaScript banyak digunakan dalam pengembangan front-end, terutama saat memodifikasi kinerja front-end dan pengulit halaman. Tugas yang telah saya lakukan baru -baru ini adalah bahwa pengguna mengklik tombol di situs lain dan memasukkan skrip di bawah halaman situs lain untuk menjalankannya, yang mencakup penyisipan gaya.
Secara umum, ada dua jenis gaya penyisipan dinamis untuk JavaScript. Salah satunya adalah memperkenalkan gaya eksternal ke dalam halaman, gunakan tag <link> di <head> untuk memperkenalkan file gaya eksternal, dan yang lainnya adalah menggunakan tag <yaya> untuk memasukkan gaya halaman di halaman (yang disebutkan di sini bukan atribut gaya).
1. Memperkenalkan gaya eksternal ke dalam halaman:
Menggunakan tag <link> di <head> untuk memperkenalkan file gaya eksternal, ini relatif sederhana, dan tidak ada masalah kompatibilitas untuk setiap browser arus utama:
Salinan kode adalah sebagai berikut:
Fungsi Termasuk InkeLinkStyle (URL) {
var link = document.createElement ("link");
link.rel = "stylesheet";
link.type = "Teks/CSS";
link.href = url;
document.getElementsbyTagname ("head") [0] .AppendChild (tautan);
}
Inclayelinkstyle ("http://css.vevb.com/home/css/reset.css?v=20101227");
Namun, dalam proyek yang saya lakukan saat ini, ada sangat sedikit gaya yang diterapkan dengan sendirinya, dan tampaknya tidak pantas untuk secara langsung memperkenalkan file gaya eksternal, jadi saya memilih solusi kedua, menggunakan tag <tyle> untuk memasukkan gaya halaman di halaman.
2. Gunakan tag <tyle> untuk menyisipkan gaya halaman:
Metode ini memiliki masalah kompatibilitas di berbagai browser utama. Browser standar seperti Firefox tidak dapat secara langsung mendapatkan nilai csStext stylesheet. Di browser standar, mereka hanya dapat menggunakan Document.Stylesheets [0] .cssrules [0] .csstext untuk mendapatkan gaya secara individual; pada saat yang sama penggunaan: document.stylesheets [0] .cssrules [0] .csStext = newcsstext; Halaman tidak akan secara otomatis memperbarui gaya, dan Anda harus menggunakan: document.stylesheets [0] .csssrules [0] .style.csstext = newcsstext; Ini tampaknya tidak dimanusiakan dan mudah digunakan. Metode yang baik digunakan dalam yui: style.appendChild (document.createTextNode (styles)); Gunakan CreateTextNode untuk menambahkan string gaya ke tag <yaya>;
Salinan kode adalah sebagai berikut:
Fungsi InclayleElement (Styles, StyleID) {
if (document.geteLementById (styleId)) {
Kembali
}
var style = document.createElement ("style");
style.id = styleId;
// Yang terbaik adalah mengatur properti berikut untuk IE di sini
/*if (iSie ()) {
style.type = "Teks/CSS";
style.media = "layar"
}*/
(document.getElementsbyTagname ("head") [0] || document.body) .AppendChild (style);
if (style.stylesheet) {// untuk yaitu
style.stylesheet.csstext = styles;
} else {// untuk w3c
style.appendChild (document.createTextNode (styles));
}
}
var styles = "#div {latar belakang-warna:#ff3300; warna: #fffff}";
Includeleelement (Styles, "Newstyle");
Dengan cara ini, elemen -elemen di halaman dapat langsung diterapkan pada gaya, terlepas dari apakah elemen Anda ditambahkan melalui skrip.
Tentang tangan konyol:
Lihat kode ini:
Salinan kode adalah sebagai berikut:
var divoBj = document.createElement ("div");
divobj.id = "__div";
divobj.innerhtml = "uji js insert dom and style";
Document.Body.AppendChild (DivoBJ);
var styles = "#__ div {latar belakang-warna:#ff3300; warna: #fffff}";
Includeleelement (Styles, "Newstyle");
Seperti yang disebutkan sebelumnya, proyek ini adalah ketika pengguna mengklik tombol di situs lain dan memasukkan skrip di bawah halaman situs lain untuk menjalankannya. Ini termasuk penyisipan gaya. Untuk memastikan keunikan ID elemen yang saya buat sebanyak mungkin, saya menambahkan "__" di depan ID elemen untuk menunjukkan bahwa perlindungan pribadi terhadap konflik. Akibatnya, tragedi itu disebabkan. Penamaan kelas IE6, IE7 dan ID tidak dapat dimulai dengan garis bawah ("_"), dan saya benar -benar lupa ini! Butuh dua jam untuk mencari tahu alasannya. Itu tragedi! Menarik kesimpulan! Jangan murah saat melakukan front-end!