Добавить таблицу стилей в голову, используя javascript в теле

Я работаю с CMS, который мешает нам редактировать раздел главы. Мне нужно добавить CSS-таблицу стилей на сайт сразу после тега. Есть ли способ сделать это с помощью JS, где я могу добавить script в нижней части страницы (у меня есть доступ к add script прямо перед тегом), который затем вставляет таблицу стилей в раздел главы?

Ответ 1

Обновление. Согласно спецификациям link элемент не разрешен в теле, однако большинство браузеров по состоянию на прямо сейчас все равно это сделает. Поэтому, чтобы ответить на вопрос в комментариях - действительно нужно добавить link к head страницы, а не к body.

function addCss(fileName) {

  var head = document.head
    , 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}">')

как упомянул Хуан Мендес, вы можете вставить таблицу стилей в голову вместо

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

И то же самое без jQuery (см. код выше)

Ответ 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);
}

Ответ 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