Bagaimanakah Saya Boleh Menambah Lembaran Gaya pada Bahagian Kepala dengan JavaScript?

Menambah Stylesheet ke Bahagian Head Menggunakan JavaScript dalam Body

Jika anda menghadapi senario di mana anda perlu menambah lembaran gaya CSS pada kepala tapak web bahagian tetapi dihadkan daripada mengedit kepala secara langsung, anda boleh menggunakan kod JavaScript untuk menyuntik lembaran gaya secara dinamik. Walaupun cadangan untuk memasukkan elemen pautan di bahagian kepala, kebanyakan penyemak imbas mengendalikannya dengan baik di dalam badan.

Begini cara anda boleh mencapainya:

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

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

  head.appendChild(link);
}

addCss('{my-url}');

Untuk pendekatan yang lebih mudah dengan jQuery :

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

addCss("{my-url}");

Daripada menambah pada hujung badan, yang secara teknikalnya bukan lokasi yang disyorkan untuk elemen pautan, anda juga boleh menggunakan JavaScript untuk memasukkannya terus ke bahagian kepala:

$('head').append('<link rel="stylesheet" type="text/css" href="{url}">');

Dengan menggunakan JavaScript, anda boleh menambah helaian gaya pada bahagian kepala tapak web anda dengan berkesan, walaupun anda tidak mempunyai akses langsung untuk mengedit kepala itu sendiri.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menambah Lembaran Gaya pada Bahagian Kepala dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!