Este artículo describe el método para crear dinámicamente etiquetas de enlace en el jefe de JavaScript. Compártelo para su referencia. El análisis específico es el siguiente:
Creo que muchos amigos front -end se han encontrado con la necesidad de usar JavaScript para crear dinámicamente etiquetas de hoja de estilo: etiquetas de enlace. Aquí hablaremos sobre cómo crear dinámicamente etiquetas de enlace en el navegador.
Crear etiquetas de enlace con jQuery
Si desea usar jQuery en desarrollo, entonces usar jQuery para crear etiquetas de enlace debería verse así:
La copia del código es la siguiente: var cssurl = '/style.css',
linktag = $ ('<link href = "' + cssurl + '" rel = "stylesheet" type = "text /css" medios = "' + (medios ||" todos ") + '" charset = "' + charset ||" utf-8 " + '" />');
// Consulte claramente, agregue dinámicamente etiquetas de enlace al cabezal
$ ($ ('Head') [0]). Append (LinkTag);
Crear etiquetas de enlace usando JavaScript nativo
Si te gusta JavaScript puro y natural, debes escribirlo así:
La copia del código es la siguiente: var head = document.getElementsByTagName ('Head') [0],
cssurl = '/style.css',
linktag = document.createElement ('enlace');
linktag.id = 'Dynamic-Style';
linktag.href = cssurl;
linktag.setAttribute ('rel', 'stylesheet');
linktag.setAttribute ('Media', 'All');
linktag.setAttribute ('type', 'text/css');
head.appendChild (Linktag);
El método único de IE createstyles hous
El método único de IE también es muy conveniente.
La copia del código es la siguiente: var head = document.getElementsByTagName ('Head') [0],
cssurl = 'themes/bluenight/style.css',
// Document.CreatestyleSheet ha agregado la etiqueta de enlace al cabezal. Cómo decirlo, es bastante conveniente
linktag = document.createstylesheet (CSSURL);
El método CreateStylesHeet ([Surl] [, iindex]) acepta dos parámetros, y el Surl es la ruta de URL del archivo CSS. iindex es un parámetro opcional, que se refiere a la posición de índice de la colección de hojas de estilo insertada en la página. Por defecto, el estilo recién creado se agrega al final.
Solución completa
Básicamente, todos ellos han sido introducidos, echemos un vistazo a la solución completa:
La copia del código es la siguiente: Function CreateLink (CSSURL, LNKID, Charset, Media) {
var cabeza = $ ($ ('head') [0]),
linktag = null;
if (! cssurl) {
devolver falso;
}
linktag = $ ('<link href = "' + cssurl + '" rel = "stylesheet" type = "text /css" medios = "' + (medios ||" todos ") + '" charset = "' + charset ||" utf-8 " + '" />');
head.append (Linktag);
}
function createLink (cssurl, lnkid, charset, medios) {
var head = document.getElementsByTagName ('Head') [0],
linktag = null;
if (! cssurl) {
devolver falso;
}
linktag = document.createElement ('enlace');
linktag.setAttribute ('id', (lnkid || 'Dynamic-style'));
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);
}
Espero que este artículo sea útil para la programación de JavaScript de todos.