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

不需要任何库，只使用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;}" )

另一种选择是使用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" });

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

这是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 );
}

简单而直接的方法是在文档中创建并添加一个新的样式节点。

// Your CSS as text
var styles = `
    .qwebirc-qui .ircwindow div { 
        font-family: Georgia,Cambria,"Times New Roman",Times,serif;
        margin: 26px auto 0 auto;
        max-width: 650px;
    }
    .qwebirc-qui .lines {
        font-size: 18px;
        line-height: 1.58;
        letter-spacing: -.004em;
    }
    
    .qwebirc-qui .nicklist a {
        margin: 6px;
    }
`

var styleSheet = document.createElement("style")
styleSheet.innerText = styles
document.head.appendChild(styleSheet)

你也可以使用DOM Level 2 CSS接口(MDN):

var sheet = window.document.styleSheets[0];
sheet.insertRule('strong { color: red; }', sheet.cssRules.length);

.．.除了IE8和更早的版本，它使用了自己略微不同的措辞:

sheet.addRule('strong', 'color: red;', -1);

与createElement-set-innerHTML方法相比，这种方法有一个理论上的优势，因为您不必担心在innerHTML中放入特殊的HTML字符，但实际上样式元素是遗留HTML中的CDATA，而且' < '和' & '很少在样式表中使用。

在开始像这样向它追加内容之前，确实需要一个样式表。这可以是任何现有的活动样式表:外部的、嵌入式的或空的，这都没有关系。如果没有，目前创建它的唯一标准方法是使用createElement。

这个简单的例子在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