在Jquery中使用。css，例如$('strong').css('background'，'red');

$(“强”). css(“背景”、“红色”); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> < >强的例子 < / >强

下面是我的通用函数，它参数化了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);
    }
}

这个简单的例子在html头部添加<style>

var sheet = document.createElement('style');
sheet.innerHTML = "table th{padding-bottom: 0 !important;padding-top: 0 !important;}\n"
+ "table ul {    margin-top: 0 !important;    margin-bottom: 0 !important;}\n"
+ "table td{padding-bottom: 0 !important;padding-top: 0 !important;}\n"
+ ".messages.error{display:none !important;}\n"
+ ".messages.status{display:none !important;} ";

document.body.appendChild(sheet); // append in body
document.head.appendChild(sheet); // append in head

动态样式——用JavaScript操作CSS

下面是一个示例模板来帮助您入门

不需要任何库，只使用javascript注入HTML和CSS。

这个函数是从上面的@Husky用户那里借来的

如果你想运行一个tampermonkey脚本，并想在网站上添加一个切换覆盖(例如，一个笔记应用程序)，这很有用。

// INJECTING THE HTML document.querySelector('body').innerHTML += '<div id="injection">Hello World</div>'; // CSS INJECTION FUNCTION //https://stackoverflow.com/questions/707565/how-do-you-add-css-with-javascript function insertCss( code ) { var style = document.createElement('style'); style.type = 'text/css'; if (style.styleSheet) { // IE style.styleSheet.cssText = code; } else { // Other browsers style.innerHTML = code; } document.getElementsByTagName("head")[0].appendChild( style ); } // INJECT THE CSS INTO FUNCTION // Write the css as you normally would... but treat it as strings and concatenate for multilines insertCss( "#injection {color :red; font-size: 30px;}" + "body {background-color: lightblue;}" )

这是Chris Herring的解决方案的一个稍微更新的版本，考虑到你也可以使用innerHTML，而不是创建一个新的文本节点:

function insertCss( code ) {
    var style = document.createElement('style');
    style.type = 'text/css';

    if (style.styleSheet) {
        // IE
        style.styleSheet.cssText = code;
    } else {
        // Other browsers
        style.innerHTML = code;
    }

    document.getElementsByTagName("head")[0].appendChild( style );
}

另一种选择是使用JQuery存储元素的内联样式属性，然后附加到它，然后用新值更新元素的样式属性。如下:

function appendCSSToElement(element, CssProperties)
        {
            var existingCSS = $(element).attr("style");

             if(existingCSS == undefined) existingCSS = "";

            $.each(CssProperties, function(key,value)
            {
                existingCSS += " " + key + ": " + value + ";";
            });

            $(element).attr("style", existingCSS);

            return $(element);
        }

然后用新的CSS属性作为对象执行它。

appendCSSToElement("#ElementID", { "color": "white", "background-color": "green", "font-weight": "bold" });

这可能不是最有效的方法(我愿意接受关于如何改进这一点的建议。:))，但它绝对有效。