单击处理程序后覆盖CSS文件

Question

javascript库有一个点击处理程序。

点击这样的链接时：

<a id="login_id">Login</a>

正在为带有登录信息的弹出窗口加载popup.css文件。

如何更改该弹出窗口的CSS？我不能编辑图书馆。问题是，只有当你点击它时，css文件才会加载而不是之前。在这种情况下，内联css将不起作用，因为popup.css将在使用单击处理程序时覆盖它。我尝试使用css！重要，但它确实有效。

是否可以覆盖CSS？一个jsfiddle是不可能的。遗憾。

Answer 1

假设您可以定位样式表，您可以使用JavaScript将其删除。下面的示例使用jQuery删除所有样式表：

$('link[rel=stylesheet]').remove();

定位特定网址：

$('link[rel=stylesheet][href~="url.com"]').remove();

请参阅：Removing or replacing a stylesheet (a <link>) with JavaScript/jQuery

另请参阅：jQuery – enable/disable all style sheets on page on click

弹出内容也可能通过iFrame从第三方加载。这肯定会解释为什么即使！重要也不会覆盖这些风格。

Answer 2

我认为你错过了CSS的想法。您应该使用class来确定哪些样式适用于哪些元素，而不是尝试为不同的元素设置不同的工作表。

CSS中的 C 代表级联，这正是样式所做的，具体取决于元素匹配的规则。

更好的方法是在弹出窗口中添加/删除class以更改样式，而不是完全添加/删除样式表。

示例：

$('#myPopUp').toggleClass('special-theme');

在这个例子中，它将添加/删除类special-theme，它将在这样的样式表中使用：

#myPopUp {
  background-color: #f00;
}

#myPopUp.special-theme {
  background-color: #0f0;
}

如果您无法编辑第三方CSS，则另一个选项是复制您要更改的规则。然后在加载另一个样式表时加载自定义样式表。这样，只要您按照CSS Rules of Precedence。

，它就会覆盖