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

Question

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

Answer 1

更新:根据规格,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标签的末尾即可.

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