使用jQuery覆盖现有的样式声明

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选择器）。

谢谢！

- ddofborg

---

可能是通过jQuery CSS()为动态创建的元素设置样式的重复问题。 - user113716

不，我认为他们在做其他事情。简而言之，我们需要的是更改样式类现有定义的可能性。我知道使用选择器或每次执行AJAX时更改样式的各种不同方法。 - ddofborg

被采纳的答案提供了两种解决方案。你只需要根据你的代码进行修改。$("<style>").text(".thing {color:blue;}").appendTo("head"); 示例。 - user113716

Answer 1

你可以使用DOM在头部添加样式规则

演示：问题

演示：DOM变异解决方案

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

- Joseph Marikle

---

太神奇了！我把“head”改成了“body”，因为我们需要覆盖一些在body中的样式。谢谢！！ - ddofborg

Answer 2

你可以在 AJAX 代码中使用回调函数来运行 jQuery CSS 函数。

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

- blacktea

Answer 3

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

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

然而，上述代码并不是跨浏览器的（我认为它在IE中不起作用，因为IE更喜欢使用rules而不是cssRules），但是可以通过编写更多的代码使其跨浏览器兼容。

它所做的就是改变实际的样式表，就像一直在其中有color: blue一样。这将影响当前页面上的元素以及未来添加的任何元素（请参见工作示例的fiddle）。

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

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

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

- James Allardice

Answer 4

你可以添加一个蓝色文字的样式规则。

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

并通过回调函数在您的 AJAX 上添加"blue"类

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

- Álister Lopes Ferreira