如何使用Javascript添加CSS？

如何使用Javascript添加CSS规则（例如

strong{color:red}

）

简单而直接的方法是创建一个新的

样式

节点并将其添加到文档中

// 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.type = "text/css"
styleSheet.innerText = styles
document.head.appendChild(styleSheet)

---

您还可以使用DOM级别2 CSS接口（）来实现这一点：

…除了（自然）IE8和之前的版本外，其他所有版本都使用了略微不同的措辞：

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

---

与createElement集innerHTML方法相比，这在理论上有一个优势，即您不必担心在innerHTML中放入特殊的HTML字符，但实际上，样式元素是旧式HTML中的CDATA，而“YUI最近专门针对这一点。请参见此处。

您可以逐个元素添加类或样式属性

例如：

<a name="myelement" onclick="this.style.color='#FF0';">text</a>

---

如果您想在javascript函数中执行此操作，可以使用getElementByID而不是“this”。

Ben Blank的解决方案在IE8中对我来说不起作用

然而，这在IE8中确实有效

function addCss(cssCode) {
var styleElement = document.createElement("style");
  styleElement.type = "text/css";
  if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText = cssCode;
  } else {
    styleElement.appendChild(document.createTextNode(cssCode));
  }
  document.getElementsByTagName("head")[0].appendChild(styleElement);
}

---

考虑到您也可以使用

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

---

这里是我的通用函数，它将CSS选择器和规则参数化，如果您希望添加到特定的工作表中，还可以选择使用CSS文件名（区分大小写）（否则，如果您不提供CSS文件名，它将创建一个新的样式元素并将其附加到现有的head。它将最多生成一个新的样式元素，并在将来的函数调用中重新使用）。与FF、Chrome和IE9+一起使用（可能更早，未经测试）

---

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

---

这不一定是最有效的方法（我愿意接受关于如何改进的建议：），但它确实有效。

这是一个简单的html头部添加

的例子

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

---

Source

这是我在最后一个样式表列表末尾添加css规则的解决方案：

var css = new function()
{
    function addStyleSheet()
    {
        let head = document.head;
        let style = document.createElement("style");

        head.appendChild(style);
    }

    this.insert = function(rule)
    {
        if(document.styleSheets.length == 0) { addStyleSheet(); }

        let sheet = document.styleSheets[document.styleSheets.length - 1];
        let rules = sheet.rules;

        sheet.insertRule(rule, rules.length);
    }
}

css.insert("body { background-color: red }");

---

在Jquery中使用

.css

，比如

$（'strong'）.css（'background'，'red'）


$（'strong'）.css（'background'，'red'）

示例
以下是一个示例模板，可以帮助您开始使用

需要0个库，仅使用javascript注入HTML和CSS

该函数是从上面的用户@Husky处借用的

如果您希望运行tampermonkey脚本并希望在网站上添加切换覆盖（例如，便笺应用程序），此功能非常有用


//注入HTML
document.querySelector（'body'）.innerHTML+='Hello World'；
//CSS注入函数
//https://stackoverflow.com/questions/707565/how-do-you-add-css-with-javascript
函数insertCss（代码）{
var style=document.createElement（'style'）；
style.type='text/css'；
if（style.styleSheet）{
//即
style.styleSheet.cssText=代码；
}否则{
//其他浏览器
style.innerHTML=代码；
}
document.getElementsByTagName（“head”）[0].appendChild（样式）；
}
//将CSS注入到函数中
//像平常一样编写css。。。但将其视为字符串并连接多行
插入(
“#注入{颜色：红色；字体大小：30px；}”+
“正文{背景色：浅蓝色；}”
)
如果您知道页面中至少存在一个
标记，请使用此功能：

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

用法：

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

最短的一条衬垫
//一个线性函数：
const addCSS=s=>document.head.appendChild（document.createElement（“样式”））.innerHTML=s；
//用法：
addCSS（“body{background:red；}”）
是否应该将其附加到文档的头部而不是正文？@bobince-根据HTML规范，这是绝对的，但所有浏览器都可以在任何地方识别它们
document.body
比
document.getElementsByTagName（“head”）[0]
的键入时间短，执行速度快，避免了insertRule/addRule的跨浏览器问题。解决方案后面应该有一个长的“duhhh”。真不敢相信我竟然没有想到。在所有最近的浏览器中，你都可以使用
document.head.appendChild
。这个解决方案要好得多！假设您有多个样式表：使用@bobince解决方案，您新添加的CSS可能会被页面上的第二个/第三个/etc.样式表覆盖。使用
document.body.appendChild（css）确保新CSS始终是最后一条规则。“颜色”。。哦，是的，哎呀！谢天谢地，这只是一个例子。我怀疑可能有一个DOM方法用于此，谢谢+1sheet来自
sheet=window.document.styleSheets[0]
（你必须至少有一个）。谢谢，当我只需要刷新这两行的记忆时，Google首先显示的所有示例都非常庞大。我知道已经有一段时间了，但当我测试第一行时，我得到了
SecurityError:操作不安全。
@user10089632您正在访问的样式表需要从与父文档相同的主机上提供，才能正常工作。我目前正在使用YUI进行工作，并试图找出如何编辑现有css规则的外部样式表。我不知道这个实用程序，它看起来很完美！谢谢Russell。同样的问题（答案是crossbrowser jQuery）@monkey：这是一个非常糟糕的解决方案，实际上并没有达到这里的要求。例如：如果文档中添加了一个新的
元素，会发生什么？使用事件处理程序内联JavaScript是一个非常糟糕的主意。您应该将内容与JavaScript中的功能和绑定事件处理程序分离—最好是在外部文件中。好的旧IE总是让生活更轻松。在设置
之前，您应该将元素附加到
头中。cssText
，否则如果
cssCode
包含@指令，IE6-8将崩溃，像
@import
或var css = new function()
{
    function addStyleSheet()
    {
        let head = document.head;
        let style = document.createElement("style");

        head.appendChild(style);
    }

    this.insert = function(rule)
    {
        if(document.styleSheets.length == 0) { addStyleSheet(); }

        let sheet = document.styleSheets[document.styleSheets.length - 1];
        let rules = sheet.rules;

        sheet.insertRule(rule, rules.length);
    }
}

css.insert("body { background-color: red }");

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

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