javascript - 用 jQuery 覆盖现有的样式声明

Question

我有以下 HTML 代码:

<style>
  .thing { color: red }
</style>

<p class="thing">This is a nice thing</p>

我想更改所有当前内容和所有通过 AJAX 进入页面的 future 内容的“.thing”样式。

$('.thing').css('color', 'blue');

这可行，但如果通过 AJAX 将新的 HTML 代码添加到文档中，所有“.thing”元素仍将被着色为红色。

我想要的是更改文档的整个样式属性“.thing”，而不仅仅是当前元素(使用 jQuery 选择器)。

谢谢!

Answer 1

您可以使用 DOM 在 header 中添加样式规则

演示:The Problem

演示:DOM Mutation Solution

var newStyles = document.createElement("style");
newStyles.type="text/css";
newStyles.innerHTML = ".thing{color:blue}";
document.head.appendChild(newStyles);