Bagaimana untuk Menyuntik Lembaran Gaya CSS sebagai Rentetan dalam JavaScript untuk Sambungan Chrome?

Menyuntik Lembaran Gaya CSS sebagai Rentetan dalam JavaScript

Untuk menambah gaya CSS tersuai pada antara muka sambungan Chrome, kami menghadapi cabaran dengan document.stylesheets. Begini cara menyuntik lembaran gaya lengkap menggunakan rentetan JavaScript:

Mencipta dan Menambah Elemen Gaya:

Penyelesaian paling mudah ialah mencipta elemen, tetapkan sifat textContentnya pada rentetan CSS dan tambahkannya pada dokumen:

<code class="javascript">const style = document.createElement('style');
style.textContent = 'body { color: red; }';
document.head.append(style);</code>

Suntikan CSS Berbilang:

Jika anda mahu untuk menyuntik berbilang gaya ke dalam satu pas, anda boleh membalut kod di atas dalam fungsi utiliti:

<code class="javascript">function addStyle(styleString) {
  const style = document.createElement('style');
  style.textContent = styleString;
  document.head.append(style);
}</code>

Suntikan CSS Boleh Ganti:

Sebagai alternatif, anda boleh mengubah suai fungsi untuk menimpa suntikan CSS sebelumnya:

<code class="javascript">const addStyle = (() => {
  const style = document.createElement('style');
  document.head.append(style);
  return (styleString) => (style.textContent = styleString);
})();</code>

Keterbatasan IE:

Perhatikan bahawa IE9 dan ke bawah mempunyai had 32 helaian gaya, manakala IE10 membenarkan 4095. Berhati-hati apabila menggunakan kod yang tidak boleh diganti untuk pelayar lama.

Memodenkan Jawapan:

Kemas kini terbaharu telah menggantikan .innerHTML dengan .textContent atas sebab keselamatan. Kod yang dikemas kini:

<code class="javascript">const style = document.createElement('style');
style.textContent = styleString;
document.head.append(style);</code>

Atas ialah kandungan terperinci Bagaimana untuk Menyuntik Lembaran Gaya CSS sebagai Rentetan dalam JavaScript untuk Sambungan Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!