在body中使用javascript将样式表添加到Head

Question

我正在使用一个CMS，它阻止我们编辑head部分。我需要添加css样式表到网站，就在标签之后。有没有办法用JS实现这一点，我可以在页面的底部添加一个脚本(我有权在标签之前添加脚本)，然后将样式表注入head部分？

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

原始答案：

您不需要将其添加到head，只需将其添加到body标签的末尾。

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

正如Juan Mendes所提到的，您可以将样式表插入头部

$('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