Bagaimanakah Saya Boleh Menambah Lembaran Gaya pada Kepala Secara Dinamik Menggunakan JavaScript?

Tambahkan Lembaran Gaya ke Kepala Secara Dinamik Menggunakan JavaScript

Dalam senario tertentu, mengakses dan mengedit bahagian kepala halaman web mungkin dihadkan. Walau bagaimanapun, masih terdapat keperluan untuk menambah helaian gaya tambahan untuk meningkatkan penampilan visual tapak. Ini menimbulkan persoalan: bolehkah kita menggunakan JavaScript untuk menyelesaikan tugas ini, memastikan lembaran gaya dimasukkan selepas teg kepala?

Untuk menangani cabaran ini, JavaScript menawarkan penyelesaian serba boleh:

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('{myUrl}');

Sebagai alternatif, jika anda lebih suka jQuery:

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

addCss("{myUrl}");

Kaedah ini menambahkan elemen pautan lembaran gaya secara dinamik pada bahagian kepala dokumen HTML, membolehkan anda menambah gaya tambahan pada tapak web anda walaupun akses kepada bahagian kepala adalah terhad.

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