Question

我有以下HTML代码：

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

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

我想改变所有当前内容以及通过AJAX进入页面的所有未来内容的“.thing”风格。

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

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

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

谢谢！

Answer 1

您可以使用DOM

在标题中添加样式规则

演示：The Problem

演示：DOM Mutation Solution

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

Answer 2

您可以在AJAX代码上使用回调函数来运行jquery css函数。

$.ajax({
  url: "test.html",
  context: document.body,
  success: function(){
    $('.thing').css('color', 'blue');
  }
});

Answer 3

如果由于某种原因您无法使用重复问题中提供的任何技术，您可以修改样式表本身for example：

document.styleSheets[1].cssRules[0].style.color = "blue";

但是，上面这行不是跨浏览器（我不认为它会在IE中工作，它更喜欢rules而不是cssRules）但是可以使它与跨浏览器兼容多一点代码。

所有这一切都是改变实际的样式表，所以就像你一直有color: blue一样。这将影响当前页面上的元素以及将来添加的任何元素（请参阅工作示例的小提琴）。

请注意，您必须修改索引以适合您的网页。示例中使用的索引正好适用于jsfiddle.net上的给定样式表。

编辑尝试跨浏览器解决方案：

var cssRules = (document.styleSheets[1].cssRules) ? document.styleSheets[1].cssRules[0] : document.styleSheets[1].rules[0];
cssRules.style.color = "blue";

Answer 4

您可以为蓝色文字添加样式规则

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

并通过AJAX上的回调函数添加“blue”类

$('.thing').addClass('blue');

用jQuery覆盖现有的样式声明

4 个答案:

演示：The Problem

演示：DOM Mutation Solution