是否可以使用JavaScript更改CSS样式表？（不是对象的样式，而是样式表本身）

是否可以使用JavaScript更改CSS样式表

我不是说：

document.getElementById('id').style._____='.....';

我正在谈论改变：

#id {
    param: value;
}

除了做一些肮脏的事情（顺便说一句，我们还没有尝试过），比如在头部创建一个新对象，在那里创建一个样式标记，等等。尽管这样做，即使有效，也会带来一些问题，因为样式块已经在别处定义了，我不确定浏览器何时/是否会解析动态创建的样式块？

从2011年开始 可以，但您将面临跨浏览器兼容性问题：

截至2016年 浏览器支持有了很大改进（支持所有浏览器，包括IE9+）

• 该方法允许在样式表中动态添加规则

• 使用，可以从样式表中删除现有规则

• 可以通过样式表的属性访问样式表中的规则

---

当我想以编程方式向对象添加一组样式时，我发现以编程方式向对象添加一个类更容易（这样的类在CSS中有与之关联的样式）。您可以控制CSS中的优先顺序，以便新类中的新样式可以覆盖以前的样式。这通常比直接修改样式表容易得多，并且在跨浏览器时工作得非常好。

我们可以使用和的组合，以便能够在IE9中实现这一点：

function changeStylesheetRule(stylesheet, selector, property, value) {
    // Make the strings lowercase
    selector = selector.toLowerCase();
    property = property.toLowerCase();
    value = value.toLowerCase();

    // Change it if it exists
    for(var i = 0; i < s.cssRules.length; i++) {
        var rule = s.cssRules[i];
        if(rule.selectorText === selector) {
            rule.style[property] = value;
            return;
        }
    }

    // Add it if it does not
    stylesheet.insertRule(selector + " { " + property + ": " + value + "; }", 0);
}

// Used like so:
changeStylesheetRule(s, "body", "color", "rebeccapurple");

函数changeStylesheetRule（样式表、选择器、属性、值）{
//使字符串小写
selector=selector.toLowerCase（）；
property=property.toLowerCase（）；
value=value.toLowerCase（）；
//如果存在，请更改它
对于（var i=0；i

---

更改样式规则中的属性

function change_css_style (titulo,selector,propiedad,valor) {        
        let i=0;
        while (i<document.styleSheets.length) {
            if (document.styleSheets[i].title==titulo) {
                let y=0;
                while (y<document.styleSheets[i].cssRules.length) {
                    if (document.styleSheets[i].cssRules[y].selectorText==selector) {                                               
                        document.styleSheets[i].cssRules[y].style[propiedad] = valor;                                                                       
                        y = document.styleSheets[i].cssRules.length;
                    } 
                    y++;
                }               
                i=document.styleSheets.length;
            } 
            i++;
        }

    }

函数更改样式（titulo、selector、propiedad、valor）{
设i=0；
而(i2020)
此方法的一些优点：


不需要（但允许）指定样式表
允许一次添加/修改多个样式
接受
！重要的
属性

在匹配CSS选择器时忽略额外的空白
更改最后一个匹配的现有规则，或将其附加到最后一个匹配样式表的末尾。（其他答案添加/更改第一个规则，该规则随后可能被推翻。）

用法：

adjustCSSRules('#myDiv', 'width: 300px !important');

方法：

function adjustCSSRules(selector, props, sheets){

    // get stylesheet(s)
    if (!sheets) sheets = [...document.styleSheets];
    else if (sheets.sup){    // sheets is a string
        let absoluteURL = new URL(sheets, document.baseURI).href;
        sheets = [...document.styleSheets].filter(i => i.href == absoluteURL);
        }
    else sheets = [sheets];  // sheets is a stylesheet

    // CSS (& HTML) reduce spaces in selector to one.
    selector = selector.replace(/\s+/g, ' ');
    const findRule = s => [...s.cssRules].reverse().find(i => i.selectorText == selector)
    let rule = sheets.map(findRule).filter(i=>i).pop()

    const propsArr = props.sup
        ? props.split(/\s*;\s*/).map(i => i.split(/\s*:\s*/)) // from string
        : Object.entries(props);                              // from Object

    if (rule) for (let [prop, val] of propsArr){
        // rule.style[prop] = val; is against the spec, and does not support !important.
        rule.style.setProperty(prop, ...val.split(/ *!(?=important)/));
        }
    else {
        sheet = sheets.pop();
        if (!props.sup) props = propsArr.reduce((str, [k, v]) => `${str}; ${k}: ${v}`, '');
        sheet.insertRule(`${selector} { ${props} }`, sheet.cssRules.length);
        }
    }

该方法有三个参数：


选择器[字符串]-CSS选择器-例如：“#myDiv”

自动减少空白（
.myClass#myDiv
将匹配
.myClass#myDiv
）
规则[CSS字符串，对象]-例如（可接受任何一种）：

{边框：“纯色3px绿色”，颜色：“白色”}
“边框：纯绿色；颜色：白色”


工作表（可选）[字符串，样式表]

如果为空，将检查所有样式表
“myStyles.css”指向工作表的相对或绝对URL
document.styleSheets[1]
-对工作表的引用



其他例子：

adjustCSSRules('#myDiv', {width: '30px'}); // all stylesheets
adjustCSSRules('#myDiv', 'width: 30px', 'style.css'); // style.css only  
adjustCSSRules('#myDiv  .myClass', 'width: 30px', document.styleSheets[0]); // only first stylesheet

讨厌它让我等了11分钟才回答这个问题。这正是我要找的。谢谢。小心，这个页面已经有4年了，从那以后有了很大的变化。例如，在Firefox 5中，根据你的浏览器选择规则的
选择器显示
0=body
。现在链接似乎断了……有人可以编辑这个链接吗nswer提供了在提供的链接中发现的内容的摘要？（注意：我正在工作，因此可能网站被屏蔽，但如果可能的话，任何一种方式的内容都应该发布在这里）@MathieuRodic valid。这似乎是我的工作网络的一个问题。我仍然认为，对于其他可能无法访问链接的人，在答案中至少包含摘要级别的细节是一个好主意，但这只是我的观点。这不再是真的。请看，在JavaScript中创建
元素可能值得一试en将其附加到
元素的末尾。我怀疑它会在附加后立即应用，就像
附加到样式表一样。可能比尝试编辑样式表本身更可靠。这是一个好主意。我们今晚将测试各种方法，并将使用b美国东部标准时间：）如果您在使用旧浏览器时遇到问题，将
.cssRules
更改为
.rules
可能会有所帮助。对于Chrome，您也可以省略
.insertRule
的第二个参数，但其他浏览器（如FF）需要它。如果您的浏览器在修改样式时不更新，您可以在重新添加样式之前删除该样式。是否执行此操作by更改
for
循环，添加
s.deleteRule（i）
并删除
return
语句。还值得注意的是，由于小写，诸如
backgroundPosition
等属性将不起作用。这还需要转换为其连字符等效（
background position
）与
insertRule（）
一起使用。这不符合OP的预期。编辑的规则指定给检查器中看到的对象，而不是实际的样式表。
function adjustCSSRules(selector, props, sheets){

    // get stylesheet(s)
    if (!sheets) sheets = [...document.styleSheets];
    else if (sheets.sup){    // sheets is a string
        let absoluteURL = new URL(sheets, document.baseURI).href;
        sheets = [...document.styleSheets].filter(i => i.href == absoluteURL);
        }
    else sheets = [sheets];  // sheets is a stylesheet

    // CSS (& HTML) reduce spaces in selector to one.
    selector = selector.replace(/\s+/g, ' ');
    const findRule = s => [...s.cssRules].reverse().find(i => i.selectorText == selector)
    let rule = sheets.map(findRule).filter(i=>i).pop()

    const propsArr = props.sup
        ? props.split(/\s*;\s*/).map(i => i.split(/\s*:\s*/)) // from string
        : Object.entries(props);                              // from Object

    if (rule) for (let [prop, val] of propsArr){
        // rule.style[prop] = val; is against the spec, and does not support !important.
        rule.style.setProperty(prop, ...val.split(/ *!(?=important)/));
        }
    else {
        sheet = sheets.pop();
        if (!props.sup) props = propsArr.reduce((str, [k, v]) => `${str}; ${k}: ${v}`, '');
        sheet.insertRule(`${selector} { ${props} }`, sheet.cssRules.length);
        }
    }

adjustCSSRules('#myDiv', {width: '30px'}); // all stylesheets
adjustCSSRules('#myDiv', 'width: 30px', 'style.css'); // style.css only  
adjustCSSRules('#myDiv  .myClass', 'width: 30px', document.styleSheets[0]); // only first stylesheet