Добавьте CSS в <head> с JavaScript?

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

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

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

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

Итак, я подумал про себя: что, если вы можете положить css, который у вас есть в файле css, в script, попробуйте script разобрать css и добавить его в голову, или даже лучше просто script добавить css непосредственно в <head> документа.

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

Изменить + РЕШЕНИЕ:

Я отредактировал ответ roryf для работы кросс-браузера (кроме 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);
 }

Ответ 1

Если вы не хотите полагаться на библиотеку 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

Ответ 2

Изменить. Как следует из предложения 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" />');

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

Ответ 3

Простое решение без 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 или более сложное решение будет действительно зависеть от вашей ситуации.

Ответ 4

Здесь функция, которая будет динамически создавать правило 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;");