使用javascript或jquery覆盖一个css规则

是否有可能覆盖使用jQuery或JavaScript的CSS规则？

比方说，我有一个表，有一堆行，每行都有一个特定类型的数据。 每行（tr）都添加了一个类，所以我们可以区分它所持有的数据类型。

对于这个例子，我们假设行的类名为“names”，保存有关人员的信息，而类“company”的行保存有关公司的信息。

假设我们的桌子上方有一个过滤器，我们可以在桌子上隐藏并显示所有公司或人员。 当我们选择一个复选框时，我们要么将特定行的显示更改为none，要么将其屏蔽（取决于复选框的状态），或者向特定行添加一个类（隐藏）。 我们的CSS看起来像这样：

.names {
   /*additional css stuff here*/
}

.company {
   /*additional css stuff here*/
}

.company .hidden {
   display: none;
}

.names .hidden {
   display: none;
}

这很好，但如果我隐藏所有的名字，通过将隐藏的类添加到特定的行，但后来动态地将一个人的新记录引入到数据库中，该怎么办。 我将不得不检查我们的复选框状态，并在将特定类插入到我们的表结构中之前将其应用（或省略）到新tr。

如果我能以某种方式动态地覆盖css规则，例如，当“names”复选框被选中时，我会覆盖CSS中的“.names”类，以显示：none，我不必担心在进行额外的检查时在表格中插入新数据。

这可能以某种方式吗？

编辑：我知道我可以动态地添加一个新的类，或从html元素中删除一个类。 我想要实现的是用jquery更改运行时的样式表，覆盖原始样式表中特定类的规则。

---

你不应该改变样式表规则。 改为改变你添加类的位置来控制显示状态。 向表（或tbody）添加一个类，而不是行。

例如：你想隐藏公司行，你在table元素中添加一个“companyHidden”类。 以下规则将隐藏这些行。

table.companyHidden tr.company {
    display: none;
}

这样你就不必担心新的行，CSS可以帮你完成工作。

---

您可以将所需的CSS样式元素随时添加到文档主体中。

看到这个JSFiddle

如果引用bootstrap.css并且在加载时覆盖.btn-primary：

$(function(){
   $("<style>")
       .text(".btn-primary{ background-color: cyan !important; min-height:20px; }")
       .appendTo($("body"));
});

你可以使用类似的方法，我认为？

链接地址: http://www.djcxy.com/p/94875.html

上一篇: Overwrite a css rule using javascript or jquery

下一篇: Best way to dynamically add and remove style on elements