Javascript secara dinamis membuat tag tautan ke kepala

Artikel ini menjelaskan metode membuat tag tautan secara dinamis ke kepala JavaScript. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:

Saya percaya bahwa banyak teman front -end telah menemukan kebutuhan untuk menggunakan JavaScript untuk secara dinamis membuat tag stylesheet - tag tautan. Di sini kita akan berbicara tentang cara membuat tag tautan secara dinamis di browser.

Buat tag tautan dengan jQuery

Jika Anda suka menggunakan jQuery dalam pengembangan, maka gunakan jQuery untuk membuat tag tautan akan terlihat seperti ini:

Salinan kode adalah sebagai berikut: var cssurl = '/style.css',

linktag = $ ('<tautan href = "' + cssurl + '" rel = "stylesheet" type = "text /css" media = "' + (media ||" all ") + '" charset = "' + charset ||" UTF-8 " + '" />');

// Silakan lihat dengan jelas, tambahkan tag tautan secara dinamis ke kepala

$ ($ ('head') [0]). append (linktag);

Buat tag tautan menggunakan javascript asli

Jika Anda menyukai JavaScript murni dan alami, Anda perlu menulisnya seperti ini:

Salinan kode adalah sebagai berikut: var head = document.geteLementsbyTagname ('head') [0],

cssurl = '/style.css',

linktag = document.createElement ('link');

linktag.id = 'dinamis-gaya';

linktag.href = cssurl;

linktag.setAttribute ('rel', 'stylesheet');

linktag.setAttribute ('media', 'all');

linktag.setAttribute ('type', 'text/css');

head.AppendChild (LinkTag);

Metode CreateStylesheet IE yang unik

Metode IE yang unik juga sangat nyaman.

Salinan kode adalah sebagai berikut: var head = document.geteLementsbyTagname ('head') [0],

cssurl = 'tema/bluenight/style.css',

// document.createstylesheet telah menambahkan tag tautan ke kepala. Bagaimana mengatakannya, itu cukup nyaman

linktag = document.createTylesheet (cssurl);

Metode CreateStylesheet ([Surl] [, IIndex]) menerima dua parameter, dan SURL adalah jalur URL dari file CSS. IIndex adalah parameter opsional, yang mengacu pada posisi indeks dari koleksi stylesheets yang dimasukkan ke dalam halaman. Secara default, gaya yang baru dibuat ditambahkan di akhir.

Solusi lengkap

Pada dasarnya, semuanya telah diperkenalkan, mari kita lihat solusi lengkapnya:

Salinan kode adalah sebagai berikut: Function CreateLink (CSSURL, LNKID, Charset, Media) {

var head = $ ($ ('head') [0]),

linktag = null;

if (! cssurl) {

mengembalikan false;

}

linktag = $ ('<tautan href = "' + cssurl + '" rel = "stylesheet" type = "text /css" media = "' + (media ||" all ") + '" charset = "' + charset ||" UTF-8 " + '" />');

head.append (linktag);

}

Function CreateLink (CSSURL, LNKID, Charset, Media) {

var head = document.geteLementsbyTagname ('head') [0],

linktag = null;

if (! cssurl) {

mengembalikan false;

}

linktag = document.createElement ('link');

linktag.setAttribute ('id', (lnkid || 'dinamis-gaya'));

linktag.setAttribute ('rel', 'stylesheet');

linktag.setAttribute ('charset', (charset || 'UTF-8'));

linktag.setAttribute ('media', (media || 'all'));

linktag.setAttribute ('type', 'text/css');

linktag.href = cssurl;

head.AppendChild (LinkTag);

}

Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.