javascript更改css声明答案

【问题标题】：javascript change css declarationjavascript更改css声明
【发布时间】：2013-12-21 04:37:50
【问题描述】：

我是 jQuery 的初学者，了解 addClass() 的用法，但我经常想知道，与其给元素添加类，不如改变类的含义？

例如，我有一个表格行：

<tr>
    <td class="somethingIMayNotWantToSee">A</td>
    <td >B</td>
    <td >C</td>
</tr>

我意识到执行此操作的常用方法是 .css('display','none');.. 但是否有可能，即使只是更改也可行

.somethingIMayNotWantToSee{ display:block; }

到

.somethingIMayNotWantToSee{ display:none; }

或者是在页面加载时已经在系统中设置的。

【问题讨论】：

技术上你可以做到...但不会建议它
见jsfiddle.net/arunpjohny/F8y36/1
@ŠimeVidas 只是为了表明它是可能的......
@ŠimeVidas 我们已经给出了不要这样做的建议......但是知道可以做一些事情以及与实际使用它有什么不同......最佳实践很重要......但仍然是OP 可以通过代码了解它是如何实现的
我同意这不是一个好习惯。不过，知道它是如何完成的很有趣。

标签： javascript jquery css

【解决方案1】：

从技术上讲，使用 javascript 编辑页面上任何样式声明的样式属性是可行的，不幸的是，直到最近，在何处、何时以及如何执行此操作的不同实现之间几乎没有兼容性。

如果您真的希望以这种方式更改页面的 CSS，我建议您访问 MDN 页面 https://developer.mozilla.org/en-US/docs/Web/API/document.styleSheets，其中包含有关如何使用 javascript 操作 CSSOM 的信息

【讨论】：

【解决方案2】：

使用document.styleSheets 可能会帮助您解决这个问题。有可能HERE。

【讨论】：

【解决方案3】：

CSSStyleSheet.insertRule() 方法将新的/追加样式规则插入到当前样式表中。我们可以使用 insertRule 和 addRule (as reqd.) 方法向我们的预定义类添加/附加新规则，如下所示：

function addCSSRule(sheet, selector, rules,index) {
    if(sheet.insertRule) {
        sheet.insertRule(selector + "{" + rules + "}", index);
    }
    else {
        sheet.addRule(selector, rules, index);
    }
    //if -else is used because some browsers don't support insertRule 
    //and some don't support addRule
}

// 我们可以把它当作

addCSSRule(document.styleSheets[0], "header", "float: left",-1);

http://happycodng.blogspot.in/2013/12/add-rule-and-insert-rule-methods-css.html

【讨论】：