Cara membuat teg pautan secara dinamik di kepala dengan kemahiran JavaScript_javascript

Contoh dalam artikel ini menerangkan kaedah mencipta teg pautan secara dinamik di kepala menggunakan JavaScript. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Saya percaya ramai rakan hadapan telah menghadapi keperluan untuk menggunakan JavaScript untuk mencipta teg helaian gaya secara dinamik - teg pautan. Di sini kita akan bercakap tentang cara membuat teg pautan secara dinamik dalam penyemak imbas.

Gunakan jQuery untuk membuat teg pautan

Jika anda suka menggunakan jQuery dalam pembangunan, maka menggunakan jQuery untuk mencipta teg pautan sepatutnya kelihatan seperti ini:

Salin kod Kod adalah seperti berikut:

var cssURL = '/style.css',
linkTag = $('<link href="' cssURL '" rel="stylesheet" type="text/css" media="' (media || "semua") '" charset="' charset || "utf -8" '" />');
// Sila lihat dengan jelas, teg pautan ditambah secara dinamik pada kepala
$($('kepala')[0]).append(linkTag);

Buat teg pautan menggunakan JavaScript asli

Jika anda suka JavaScript asli tulen, anda perlu menulis seperti ini:

Salin kod Kod adalah seperti berikut:

var head = document.getElementsByTagName('head')[0],
cssURL = '/style.css',
LinkTag = document.createElement('link');

LinkTag.id = 'gaya dinamik';
linkTag.href = cssURL;
linkTag.setAttribute('rel','stylesheet');
linkTag.setAttribute('media','all');
linkTag.setAttribute('type','text/css');

head.appendChild(linkTag);

Kaedah unik dalam IE createStyleSheet

Kaedah createStyleSheet unik untuk IE juga sangat mudah.

Salin kod Kod adalah seperti berikut:

var head = document.getElementsByTagName('head')[0],
cssURL = 'tema/BlueNight/style.css',
// document.createStyleSheet Teg pautan telah ditambahkan pada kepala pada masa yang sama Bagaimana untuk mengatakan, ia agak mudah
LinkTag = document.createStyleSheet(cssURL);

Kaedah createStyleSheet([sURL] [, iIndex]) menerima dua parameter, sURL ialah laluan URL bagi fail CSS. iIndex ialah parameter pilihan, yang merujuk kepada kedudukan indeks pautan yang disisipkan dalam koleksi helaian gaya pada halaman Lalai adalah untuk menambah gaya yang baru dibuat pada penghujung.

Penyelesaian lengkap

Pada asasnya pengenalan sudah berakhir, mari kita lihat penyelesaian lengkap:

Salin kod Kod adalah seperti berikut:

fungsi createLink(cssURL,lnkId,charset,media){
var head = $($('head')[0]),
LinkTag = batal;

if(!cssURL){
Kembalikan palsu;
}

linkTag = $('<link href="' cssURL '" rel="stylesheet" type="text/css" media="' (media || "semua") '" charset="' charset || "utf -8" '" />');

head.append(linkTag);
}
fungsi createLink(cssURL,lnkId,charset,media){
var head = document.getElementsByTagName('head')[0],
        linkTag = null;

if(!cssURL){
Kembalikan palsu;
}
 
linkTag = document.createElement('link');
linkTag.setAttribute('id',(lnkId || 'dynamic-style'));
linkTag.setAttribute('rel','stylesheet');
linkTag.setAttribute('charset',(charset || 'utf-8'));
linkTag.setAttribute('media',(media||'semua'));
linkTag.setAttribute('type','text/css');
LinkTag.href = cssURL;
Head.appendChild(linkTag); }

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.