Este artigo descreve o método de criação dinamicamente de tags de link na cabeça do JavaScript. Compartilhe para sua referência. A análise específica é a seguinte:
Acredito que muitos amigos do front -end encontraram a necessidade de usar o JavaScript para criar dinamicamente as tags de link da folha de estilo. Aqui falaremos sobre como criar dinamicamente tags de link no navegador.
Crie tags de link com jQuery
Se você gosta de usar o jQuery no desenvolvimento, o uso do jQuery para criar tags de link deve ser assim:
A cópia do código é a seguinte: var cssurl = '/style.css',
linktag = $ ('<link href = "' + cssurl + '" rel = "stylesheet" type = "text /css" media = "' + (mídia ||" all ") + '" charset = "' + charset ||" utf-8 " + '" />');
// Por favor, consulte claramente, adicione dinamicamente tags de link à cabeça
$ ($ ('head') [0]). Apênder (linktag);
Crie tags de link usando javascript nativo
Se você gosta de javascript puro e natural, precisa escrever assim:
A cópia do código é a seguinte: var head = document.getElementsByTagName ('Head') [0],
cssurl = '/style.css',
linktag = document.createElement ('link');
linkTag.id = 'estilo dinâmico';
linktag.href = cssurl;
linkTag.SetAttribute ('rel', 'STILESHEET');
linktag.setAttribute ('mídia', 'all');
linktag.setAttribute ('type', 'text/css');
head.appendChild (linkTag);
Ou seja, o método exclusivo Createstylesheet
O método único do IE também é muito conveniente.
A cópia do código é a seguinte: var head = document.getElementsByTagName ('Head') [0],
cssurl = 'temas/bluenight/style.css',
// document.createstylesheet adicionou a tag de link à cabeça. Como dizer isso, é bastante conveniente
linktag = document.createstylesheet (cssurl);
O método CreateStysheetsheet ([SURL] [, IIndex]) aceita dois parâmetros, e o SURL é o caminho da URL do arquivo CSS. O iIndex é um parâmetro opcional, que se refere à posição de índice da coleção de folhas de estilo inserida na página. Por padrão, o estilo recém -criado é adicionado no final.
Solução completa
Basicamente, todos eles foram introduzidos, vamos dar uma olhada na solução completa:
A cópia do código é a seguinte: função createLink (cssurl, lnkid, charset, mídia) {
var cabeça = $ ($ ('cabeça') [0]),
linktag = null;
if (! cssurl) {
retornar falso;
}
linktag = $ ('<link href = "' + cssurl + '" rel = "stylesheet" type = "text /css" media = "' + (mídia ||" all ") + '" charset = "' + charset ||" utf-8 " + '" />');
Head.Append (LinkTag);
}
função createLink (cssurl, lnkid, charset, mídia) {
var head = document.getElementsByTagName ('Head') [0],
linktag = null;
if (! cssurl) {
retornar falso;
}
linktag = document.createElement ('link');
linktag.setAttribute ('id', (lnkid || 'estilo dinâmico'));
linkTag.SetAttribute ('rel', 'STILESHEET');
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 artigo seja útil para a programação JavaScript de todos.