Bagaimana untuk Menyuntik Lembaran Gaya ke dalam Ketua Dokumen Anda dengan JavaScript?

Menyuntik Stylesheet ke dalam Head dengan JavaScript

Ketidakupayaan anda untuk mengubah suai bahagian kepala CMS anda menimbulkan cabaran apabila menambahkan lembaran gaya CSS pada anda laman web. Walau bagaimanapun, penyelesaian wujud dengan menggunakan JavaScript untuk menyuntik lembaran gaya secara dinamik ke dalam halaman.

Untuk mencapai ini, anda boleh mencipta skrip dan meletakkannya sejurus sebelum penutup tag. Dalam skrip ini, anda boleh membina elemen pautan menggunakan kaedah document.createElement() dan tetapkan jenisnya kepada "text/css" dan rel kepada "stylesheet." Akhir sekali, tetapkan atribut href kepada fail helaian gaya yang dikehendaki.

Berikut ialah contoh menggunakan JavaScript vanila:

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

Sebagai alternatif, jika anda lebih suka jQuery untuk kemudahan penggunaan:

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

addCss("{my-url}");

Walaupun sebelum ini dicadangkan untuk menambahkan elemen pautan pada badan, pendekatan ini mungkin mengakibatkan pemaparan lembaran gaya yang salah dalam sesetengah penyemak imbas. Oleh itu, adalah disyorkan untuk memasukkan pautan terus ke dalam kepala dokumen seperti yang ditunjukkan dalam contoh yang disediakan.

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