it-swarm.com.ru

Добавить CSS в <head> с помощью JavaScript?

Есть ли способ добавить css из строки в файле javascript в заголовок документа с помощью javascript?

Допустим, у нас есть веб-страница со скриптом лайтбокса, для работы этого скрипта требуется файл css. 

Теперь добавление этого CSS-файла с помощью <link> сделает загрузку CSS-файла даже для людей, у которых не включен js. 

Я знаю, что могу динамически загружать файл css со сценарием, но это также означает, что будет 2 http-запроса, и в случаях, когда в файле мало или почти нет css, я нахожу это неэффективным. 

Поэтому я подумал про себя, что если бы вы могли поместить CSS, который есть в файле CSS, в сценарий, заставить скрипт анализировать CSS и добавить его в голову, или, что еще лучше, просто добавить сценарий непосредственно в CSS <head> документа. 

Но я не нашел ничего в Интернете, что наводит на мысль, что это возможно, так возможно ли добавить css в голову с помощью js?

Правка + РЕШЕНИЕ:

Я отредактировал ответ Рорифа на работу кросс-браузер (кроме IE5)

Javascript:

 function addcss(css){
    var head = document.getElementsByTagName('head')[0];
    var s = document.createElement('style');
    s.setAttribute('type', 'text/css');
    if (s.styleSheet) {   // IE
        s.styleSheet.cssText = css;
    } else {                // the world
        s.appendChild(document.createTextNode(css));
    }
    head.appendChild(s);
 }
56
Timo Huovinen

Как вы пытаетесь добавить строку CSS в <head> с помощью JavaScript? вставляя строку CSS в страницу, это легче сделать с помощью элемента <link>, чем элемента <style>.

Следующее добавляет правило p { color: green; } на страницу.

<link rel="stylesheet" type="text/css" href="data:text/css;charset=UTF-8,p%20%7B%20color%3A%20green%3B%20%7D" />

Вы можете создать это в JavaScript просто по URL, кодирующему вашу строку CSS и добавляющему его в атрибут HREF. Гораздо проще, чем все причуды элементов <style> или прямой доступ к таблицам стилей.

var linkElement = this.document.createElement('link');
linkElement.setAttribute('rel', 'stylesheet');
linkElement.setAttribute('type', 'text/css');
linkElement.setAttribute('href', 'data:text/css;charset=UTF-8,' + encodeURIComponent(myStringOfstyles));

Это будет работать в IE 5.5 и выше

Решение, которое вы отметили, будет работать, но это решение требует меньше операций dom и только одного элемента.

17
moefinley

Если вы не хотите полагаться на библиотеку javascript, вы можете использовать document.write(), чтобы выложить требуемый css, обернутый в теги style, прямо в документ head:

<head>
  <script type="text/javascript">
    document.write("<style>body { background-color:#000 }</style>");
  </script>
  # other stuff..
</head>

Таким образом, вы не запускаете дополнительный HTTP-запрос.

Существуют и другие решения, которые были предложены/добавлены/удалены, но я не вижу смысла слишком усложнять то, что уже отлично работает в кросс-браузерной среде. Удачи!

http://jsbin.com/oqede3/edit

24
Jeriko

Edit: Как подсказывают комментарии Atspulgs, вы можете достичь того же самого без jQuery, используя querySelector :

document.querySelector('head').innerHTML += '<link rel="stylesheet" href="styles.css" type="text/css"/>';

Более старый ответ ниже.


Вы можете использовать библиотеку jQuery , чтобы выбрать элемент head и добавить к нему HTML, например:

$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

Вы можете найти полное руководство по этой проблеме здесь

24
thomaux

Простое решение, не относящееся к jQuery, хотя и немного взломанное для IE:

var css = ".lightbox { width: 400px; height: 400px; border: 1px solid #333}";

var htmlDiv = document.createElement('div');
htmlDiv.innerHTML = '<p>foo</p><style>' + css + '</style>';
document.getElementsByTagName('head')[0].appendChild(htmlDiv.childNodes[1]);

Кажется, что IE не позволяет устанавливать innerText, innerHTML или использовать appendChild для элементов style. Вот отчет об ошибке , который демонстрирует это, хотя я думаю, что он неправильно определяет проблему. Обходной путь выше взят из комментариев к сообщению об ошибке и был протестирован в IE6 и IE9.

Используете ли вы это, document.write или более сложное решение будет зависеть от вашей ситуации.

14
roryf

Вот функция, которая будет динамически создавать правило CSS во всех основных браузерах. createCssRule принимает селектор (например, «p.purpleText»), правило (например, «color: purple;») и, необязательно, Document (текущий документ используется по умолчанию):

var addRule;

if (typeof document.styleSheets != "undefined" && document.styleSheets) {
    addRule = function(selector, rule) {
        var styleSheets = document.styleSheets, styleSheet;
        if (styleSheets && styleSheets.length) {
            styleSheet = styleSheets[styleSheets.length - 1];
            if (styleSheet.addRule) {
                styleSheet.addRule(selector, rule)
            } else if (typeof styleSheet.cssText == "string") {
                styleSheet.cssText = selector + " {" + rule + "}";
            } else if (styleSheet.insertRule && styleSheet.cssRules) {
                styleSheet.insertRule(selector + " {" + rule + "}", styleSheet.cssRules.length);
            }
        }
    }
} else {
    addRule = function(selector, rule, el, doc) {
        el.appendChild(doc.createTextNode(selector + " {" + rule + "}"));
    };
}

function createCssRule(selector, rule, doc) {
    doc = doc || document;
    var head = doc.getElementsByTagName("head")[0];
    if (head && addRule) {
        var styleEl = doc.createElement("style");
        styleEl.type = "text/css";
        styleEl.media = "screen";
        head.appendChild(styleEl);
        addRule(selector, rule, styleEl, doc);
        styleEl = null;
    }
};

createCssRule("body", "background-color: purple;");
9
Tim Down

Вот простой способ.

/**
 * Add css to the document
 * @param {string} css
 */
function addCssToDocument(css){
  var style = document.createElement('style')
  style.innerText = css
  document.head.appendChild(style)
}
0
Ally