使用javascript或jquery覆盖css规则

Overwrite a css rule using javascript or jquery

本文关键字：css 规则 覆盖 jquery javascript 使用      更新时间：2023-09-26

是否可以使用jquery或javascript覆盖css规则？

假设我有一个表，它有很多行，每一行都包含一种特定类型的数据。每一行（tr）都添加了一个类，因此我们可以区分它所包含的数据类型。

对于本例，假设类为"name"的行包含有关人员的信息，类为"company"的行则包含有关公司的信息。

假设我们的表上方有一个过滤器，在那里我们可以隐藏和显示表中的所有公司或人员。当我们选择一个复选框时，我们要么将特定行的显示更改为无，要么将其更改为阻止（取决于复选框状态），或者将一个类（隐藏）添加到特定行中。我们的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），而不是行。

示例：如果要隐藏公司行，则在表元素中添加一个类"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"));
});

我想你可以用类似的方法吗？

相关文章：