Bagaimanakah Saya Boleh Mengoptimumkan Teg Gaya Dicipta JavaScript untuk Keserasian Chrome?

Mengoptimumkan Teg Gaya Buatan JavaScript untuk Keserasian Chrome

Mencipta teg gaya dengan JavaScript boleh meningkatkan penggayaan dinamik halaman web. Walaupun terdapat beberapa pendekatan untuk mencapai ini, tidak semua kaedah berfungsi secara konsisten merentas pelayar. Secara khususnya, artikel ini meneroka teknik yang dipertingkatkan yang menyelesaikan isu keserasian dengan Google Chrome.

Pendekatan awal, menggunakan innerHTML untuk mencipta teg gaya dalam divNode, mempamerkan keserasian merentas penyemak imbas kecuali Chrome dan memperkenalkan isu estetik dalam Internet Explorer. Untuk menangani perkara ini, kaedah yang diubah suai dicadangkan:

var css = 'h1 { background: red; }',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

head.appendChild(style);

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

Dalam kaedah yang disemak ini, elemen gaya dilampirkan pada kepala dokumen dan bukannya badan. Pengubahsuaian ini memastikan keserasian dengan Chrome dan menghapuskan keperluan untuk pemegang tempat tambahan (
tag) dalam Internet Explorer.

Teknik ini telah diuji secara menyeluruh merentas penyemak imbas utama (IE7-9, Firefox, Opera dan Chrome) dan telah terbukti boleh dipercayai dan cekap.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengoptimumkan Teg Gaya Dicipta JavaScript untuk Keserasian Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!