Aggiungi foglio di stile a Head utilizzando javascript nel corpo

Question

Sto lavorando con un CMS che ci impedisce di modificare la sezione di testa. Devo aggiungere il foglio di stile CSS al sito, subito dopo il tag. C'è un modo per farlo con JS, dove posso aggiungere uno script in fondo alla pagina (ho accesso ad aggiungere uno script subito prima del tag) che poi inietterebbe il foglio di stile nella sezione head?

Answer 1

Aggiornamento: Secondo specs, l'elemento link non è ammesso nel corpo. Tuttavia, la maggior parte dei browser lo renderà ancora perfetto. Pertanto, per rispondere alle domande nei commenti, è necessario aggiungere link allo head della pagina e non allo 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}'); 

O un po 'più facile con jQuery

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

addCss("{my-url}"); 

---

risposta originale:

Non è necessario necessariamente aggiungerlo alla testa, basta aggiungerlo alla tag di fine del corpo.

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

come Juan Mendes accennato, è possibile inserire foglio di stile per la testa invece

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

E lo stesso senza jQuery (vedi codice qui sopra)

Answer 2

Questo farà quello che vuoi in modo intelligente modo. Anche usando puro 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

Ho modificato la funzione di Eddie per rimuovere o levetta il foglio di stile o disattivare. Restituirà anche lo stato corrente del foglio di stile. Questo è utile ad esempio, se si desidera avere un pulsante di attivazione/disattivazione sul proprio sito Web per utenti con problemi di vista e la necessità di salvare le proprie preferenze in un 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 
} 

di utilizzo Esempio:

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

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

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