Question

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

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

对于这个例子，让我们说出行，用类＆＃34;名称＆＃34;保存有关人员的信息，以及与班级＃34;公司＆＃34;掌握有关公司的信息。

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

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

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

.company .hidden {
   display: none;
}

.names .hidden {
   display: none;
}

这很好用，但是如果我说，隐藏所有名称，通过将隐藏类添加到特定行，但稍后将数据库的新记录动态引入数据库。我必须检查我们的复选框状态，并在将特定类插入到新的tr之前将其应用（或省略）。

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

这有可能吗？

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

Answer 1

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

示例：您希望隐藏公司行，您可以向表元素添加“companyHidden”类。以下规则将隐藏这些行。

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

这样您就不必担心新行了，CSS可以帮到您。

Answer 2

您可以将带有所需CSS的样式元素添加到文档正文中。

请参阅此JSFiddle

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

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

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

使用javascript或jquery覆盖css规则

2 个答案: