将样式表添加到正文中使用javascript

Question

我正在使用阻止我们编辑头部部分的CMS。我需要将CSS样式表添加到站点，紧跟在标签之后。有没有办法做到这一点与JS，我可以添加一个脚本到页面的底部（我有权访问标签之前添加脚本），然后将样式表注入头部分？

Answer 1

更新：根据specs，link元素不允许在正文中。但是，大多数浏览器仍然会呈现它。因此，要回答评论中的问题 - 真的必须将link添加到页面的head而不是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}'); 

或者使用jQuery更容易一点点

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

addCss("{my-url}"); 

---

原来的答复：

您不必一定将它添加到头部，只需将其添加到身体标记结束。

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

胡安·门德斯提到的，你可以将样式表的头部，而不是

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

而同样没有jQuery的（见上面的代码）

Answer 2

这会对你在智能想要什么办法。也使用纯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

我修改Eddie的功能删除或切换样式表或关闭。它也会返回样式表的当前状态。例如，如果您希望在网站上为视力受损用户设置切换按钮，并且需要将他们的偏好保存在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 
} 

使用范例：

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

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

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