Dodaj arkusz stylów do nagłówka używając javascript w ciele

Question

Pracuję z CMS, który uniemożliwia nam edytowanie sekcji head. Potrzebuję dodać arkusz stylów CSS do strony, zaraz po tagu. Czy istnieje sposób, aby to zrobić z JS, gdzie mogę dodać skrypt na dole strony (mam dostęp do skryptu tuż przed tagiem), który następnie wprowadziłby arkusz stylów do sekcji head?

Answer 1

Aktualizacja : Zgodnie z specs, element link nie jest dozwolony w treści. Jednak większość przeglądarek nadal będzie je dobrze renderować. Aby odpowiedzieć na pytania w komentarzach, naprawdę trzeba dodać link do strony head, a nie do body.

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

Albo trochę łatwiej z jQuery

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

addCss("{my-url}"); 

---

Original odpowiedź:

Nie trzeba koniecznie dodać go do głowy, po prostu dodaj go do koniec tagu ciała.

$('body').append('<link rel="stylesheet" type="text/css" href="{url}">') 

jak Juan Mendes wspomniano, można wstawić arkusz stylów do głowy zamiast

$('head').append('<link rel="stylesheet" type="text/css" href="{url}">') 

i to samo bez jQuery (patrz kod powyżej)

Answer 2

to zrobi to, co chcesz w inteligentnym droga. Również używając czystego JS.

function loadStyle(href, callback){ 
    // avoid duplicates 
    for(var i = 0; i < document.styleSheets.length; i++){ 
     if(document.styleSheets[i].href == href){ 
      return; 
     } 
    } 
    var head = document.getElementsByTagName('head')[0]; 
    var link = document.createElement('link'); 
    link.rel = 'stylesheet'; 
    link.type = 'text/css'; 
    link.href = href; 
    if (callback) { link.onload = function() { callback() } } 
    head.appendChild(link); 
} 

Answer 3

Mam zmodyfikowana funkcja Eddiego do usunąć lub przełącznik stylów włączyć lub wyłączyć. Zwróci również bieżący stan arkusza stylów. Jest to przydatne na przykład, jeśli chcesz mieć przycisk przełącznika na swojej stronie dla użytkowników z zaburzeniami wzroku i zapisać swoje preferencje w pliku cookie.

function toggleStylesheet(href, onoff){ 
    var existingNode=0 //get existing stylesheet node if it already exists: 
    for(var i = 0; i < document.styleSheets.length; i++){ 
     if(document.styleSheets[i].href && document.styleSheets[i].href.indexOf(href)>-1) existingNode = document.styleSheets[i].ownerNode 
    } 
    if(onoff == undefined) onoff = !existingNode //toggle on or off if undefined 
    if(onoff){ //TURN ON: 
     if(existingNode) return onoff //already exists so cancel now 
     var link = document.createElement('link'); 
     link.rel = 'stylesheet'; 
     link.type = 'text/css'; 
     link.href = href; 
     document.getElementsByTagName('head')[0].appendChild(link); 
    }else{ //TURN OFF: 
     if(existingNode) existingNode.parentNode.removeChild(existingNode) 
    } 
    return onoff 
} 

użycia próbki:

toggleStylesheet('myStyle.css') //toggle myStyle.css on or off 

toggleStylesheet('myStyle.css',1) //add myStyle.css 

toggleStylesheet('myStyle.css',0) //remove myStyle.css