Bagaimanakah Saya Menyuntik Lembaran Gaya CSS sebagai Rentetan dalam JavaScript?

Cara Menyuntik Lembaran Gaya CSS sebagai Rentetan dalam JavaScript

Pengenalan

Menggabungkan CSS tersuai ke dalam aplikasi web meningkatkan pengalaman pengguna. Artikel ini menangani isu biasa yang dihadapi oleh pembangun apabila cuba menyuntik lembaran gaya CSS lengkap sebagai rentetan menggunakan JavaScript. Kami meneroka penyelesaian yang memperkasakan anda untuk mencipta helaian gaya baharu dan mengubah suai yang sedia ada secara dinamik.

Mencipta Lembaran Gaya Baharu

Kaedah paling mudah melibatkan mencipta elemen, menetapkan sifat textContentnya dan menambahkannya pada :

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

Pendekatan ini membolehkan anda menambah berbilang blok CSS dengan memanggil addStyle() beberapa kali.

Menggantikan Lembaran Gaya Sedia Ada

Untuk menggantikan CSS sedia ada, ubah suai sedikit kod untuk menetapkan style.textContent dan bukannya menambahkan:

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

Pertimbangan

• Keserasian IE: IE9 dan ke bawah mempunyai had 32 helaian gaya. Elakkan penggunaan berlebihan dalam penyemak imbas ini.
• Keselamatan XSS: Gunakan TextContent dan bukannya innerHTML untuk mengelakkan serangan XSS.

Kesimpulan

Teknik ini menyediakan kaedah yang fleksibel untuk menyuntik CSS ke dalam aplikasi web, membolehkan pembangun meningkatkan penyesuaian visual dan meningkatkan pengalaman pengguna secara dinamik.

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