Bagaimanakah Saya Boleh Memasukkan Teg Gaya dengan JavaScript Merentasi Semua Penyemak Imbas dengan Amanah?

Memasukkan Tag Gaya dengan JavaScript: Pendekatan Yang Diperhalusi

Walaupun kaedah awal yang dibentangkan boleh mencapai matlamat dalam pelayar tertentu, ia mengalami batasan dan isu estetik. Untuk mengatasi halangan ini, pertimbangkan pendekatan yang diperhalusi berikut yang merangkumi keserasian dan keanggunan penyemak imbas yang luas.

Mencipta Elemen Gaya

Kunci untuk mencipta teg gaya dengan JavaScript terletak dalam melampirkannya pada kepala dokumen HTML, bukannya badan. Dengan berbuat demikian, kami boleh memastikan gelagat yang konsisten merentas penyemak imbas utama.

var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
head.appendChild(style);

Menetapkan Sifat Gaya

Untuk menentukan peraturan gaya, kami boleh menetapkan atribut jenis bagi elemen gaya kepada 'teks/css' dan sama ada gunakan cssText (untuk keserasian IE) atau appendChild untuk menentukan gaya sebenar peraturan.

style.type = 'text/css';
if (style.styleSheet){
  // This is required for IE8 and below.
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

Matriks Keserasian

Untuk memastikan keserasian penyemak imbas, pertimbangkan matriks keserasian berikut:

Browser	Method 1	Method 2
Chrome	No	Yes
Firefox	Yes	Yes
Opera	Yes	Yes
IE7-9	No	Yes

Kesimpulan

Dengan menambahkan elemen gaya pada dan menggunakan kaedah tetapan CSS yang sesuai, anda boleh membuat teg gaya dengan JavaScript yang berfungsi dengan pasti dan elegan merentas penyemak imbas popular.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memasukkan Teg Gaya dengan JavaScript Merentasi Semua Penyemak Imbas dengan Amanah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!