Как добавить CSS с помощью Javascript?

Question

Как добавить правила CSS (например, strong { color: red }) с помощью Javascript?

Answer 1

, если вы знаете, что хотя бы один тег <style> существует на странице, используйте эту функцию:

CSS=function(i){document.getElementsByTagName('style')[0].innerHTML+=i};

использование:

CSS("div{background:#00F}");

Answer 2

используйте .css в Jquery, как $('strong').css('background','red');

$('strong').css('background','red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong> Example
</strong> 

Answer 3

Вот моя универсальная функция, которая параметризует селектор и правила CSS и, при желании, принимает имя файла css (с учетом регистра), если вы хотите вместо этого добавить на определенный лист (в противном случае, если вы не предоставляете CSS имя файла, он создаст новый элемент стиля и добавит его к существующему заголовку (он создаст не более одного нового элемента стиля и повторно использует его при будущих вызовах функций). Работает с FF, Chrome и IE9 + (возможно, раньше, не проверял).

function addCssRules(selector, rules, /*Optional*/ sheetName) {
    // We want the last sheet so that rules are not overridden.
    var styleSheet = document.styleSheets[document.styleSheets.length - 1];
    if (sheetName) {
        for (var i in document.styleSheets) {
            if (document.styleSheets[i].href && document.styleSheets[i].href.indexOf(sheetName) > -1) {
                styleSheet = document.styleSheets[i];
                break;
            }
        }
    }
    if (typeof styleSheet === 'undefined' || styleSheet === null) {
        var styleElement = document.createElement("style");
        styleElement.type = "text/css";
        document.head.appendChild(styleElement);
        styleSheet = styleElement.sheet;
    }

    if (styleSheet) {
        if (styleSheet.insertRule)
            styleSheet.insertRule(selector + ' {' + rules + '}', styleSheet.cssRules.length);
        else if (styleSheet.addRule)
            styleSheet.addRule(selector, rules);
    }
}