Bagaimana untuk Menyuntik Lembaran Gaya ke dalam Kepala dengan JavaScript dari Badan?

Menyuntik Stylesheet ke dalam Head dengan JavaScript dalam Body

Ketidakupayaan untuk mengedit bahagian CMS boleh menimbulkan cabaran apabila perlu menambah helaian gaya CSS pada tapak web. Isu ini boleh diselesaikan dengan menggunakan JavaScript untuk menyuntik lembaran gaya terus ke dalam bahagian, walaupun skrip itu sendiri dilampirkan pada hujung tag.

Untuk mencapai matlamat ini, baharu elemen dicipta secara dinamik menggunakan JavaScript. Elemen ini dikonfigurasikan dengan atribut yang sesuai:

• taip: "text/css"
• rel: "stylesheet"
• href: URL helaian gaya ke dimuatkan

Setelah dibuat, elemen dilampirkan pada bahagian menggunakan kaedah appendChild() pada objek Document.head.

Contoh:

function addCss(fileName) {
  const head = document.head;
  const link = document.createElement("link");

  link.type = "text/css";
  link.rel = "stylesheet";
  link.href = fileName;

  head.appendChild(link);
}

addCss('{my-url}');

Kod ini mencipta elemen dengan href yang ditentukan dan tambahkannya pada bahagian.

Menggunakan jQuery:

function addCss(fileName) {
  $("<link />", {
    rel: "stylesheet",
    type: "text/css",
    href: fileName
  }).appendTo('head');
}

addCss("{my-url}");

Nota: Walaupun secara teknikal mungkin untuk menambahkan elemen kepada bahagian, ia tidak disyorkan kerana ia melanggar spesifikasi HTML. Oleh itu, adalah lebih baik untuk menambahkan elemen pada bahagian untuk pematuhan dan kemungkinan isu keserasian penyemak imbas pada masa hadapan.

Atas ialah kandungan terperinci Bagaimana untuk Menyuntik Lembaran Gaya ke dalam Kepala dengan JavaScript dari Badan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!