如何使用 jQuery 更改多个元素的样式？答案

【问题标题】：How can I change the style of multiple elements using jQuery?如何使用 jQuery 更改多个元素的样式？
【发布时间】：2009-12-02 23:08:07
【问题描述】：

我有一个 CSS 样式表，其规则如下：

h1, h2, h3, h4, .contentheading, .title{

 font-size: 13px ;
 font-weight: normal;
 font-family: Arial, Geneva, Helvetica, sans-serif ;
}

标签，类是由插件生成的，所以我不能给它添加一个类。

那么，有没有什么方法可以在运行时一次更改所有元素的样式，而不需要一个一个地遍历它们？

【问题讨论】：

【解决方案1】：

你可以在 jQuery 中做多个选择器，就像在 Css 中一样。也许不是最好的性能，但会起作用。

$('h1, h2, h3, h4, .contentheading, .title').css('color', 'red');
$('h1, h2, h3, h4, .contentheading, .title').addClass('someOtherClass');

【讨论】：

与其进行两次查找，不如将方法调用链接起来会更好：$('h1...').css('color', 'red').addClass('someOtherClass');
这是一个示例，展示了如何将 css 应用于所有这些元素或应用类.....
我可以知道如果我们使用这个对性能有什么影响吗？

【解决方案2】：

这对于 jQuery 来说非常简单。只需将有问题的选择器用作您的 jQuery 选择器，然后更改 css。所以 JavaScript/jQuery 代码是这样的，假设你想改变 font-size 和 font-weight:

$('h1, h2, h3, h4, .contentheading, .title').css({
  'font-size': '17px',
  'font-weight': 'bold'
});

听起来您是 jQuery 新手，您可能想熟悉 docs 和 api 网站。

【讨论】：

【解决方案3】：

在 CSS 中：

* {
    font-size: 13px;
    font-weight: normal;
    font-family: Arial, Geneva, Helvetica, sans-serif;
}

【讨论】：

有什么方法可以让我获得所有元素的当前字体大小，然后再增加一个
是的。只需遍历每个元素。不过有两个问题。如果 DOM 很大，它可能会很昂贵，并且大小不必是 px，也可以是 pt、em 或 %。这让你的工作更难了。为什么还要在 JavaScript 中执行此操作？

【解决方案4】：

$('h1,h2,h3,h4,.contentheading,.title').css({ 'color': '#fff' });

【讨论】：

【解决方案5】：

由于这个问题被标记为 jQuery，使用 * 选择器应该可以帮助您获取所有元素。然后就可以使用css方法来改变样式了。

$('*').css();

在 CSS 中，您可以使用相同的 * 选择器将一些样式应用于所有元素，但请确保将其放在 CSS 文件的最后，以便覆盖所有其他规则。

* {
    font-size: 13px;
    font-weight: normal;
    font-family: Arial, Geneva, Helvetica, sans-serif;
}

【讨论】：