你如何根据风格选择元素？

Posted 2023-03-06

【中文标题】你如何根据风格选择元素？

【英文标题】：How do you select elements based on their style?

【发布时间】：2010-10-01 07:40:53

【问题描述】：

使用 jQuery，您将如何找到具有特定样式的元素（例如：float: left），无论它是内联样式还是在 CSS 文件中定义的样式？

【参考方案1】：

使用filter function：

$('*').filter(function() 
     return $(this).css('float') == 'left';
);

用适合您情况的选择器替换“*”。

【讨论】：

我认为比我的解决方案要好得多。

是的，+1 很好的答案，但为了理智和速度，人们可能希望将搜索字段减少到小于“*”的内容

您应该使用this.css.float，而不是为过滤器的每次迭代创建一个新的jQuery对象。

@Alnitak 如果你想使用 jQuery 的.css()，你需要把它变成一个对象。原因是 .css() 不是 javascript 函数，所以您仍然需要使用 $(this)。您可以使用$(this).css.float，但它不会找到left，因为float 不是索引。如果您想使用严格的this，则必须使用this.attributes.style.nodeValue.search(/float:(\s)?left/i) != -1 之类的不同方式选择它，因为其他属性可以设置为“左”。因此，即使有开销，$(this).css('float') 也是 IMO 的最佳选择。

【参考方案2】：

这会很慢。就像真的很慢。如果您知道需要选择具有给定 CSS 样式的所有元素，则通过将单个附加 CSS 规则应用于每个元素，然后按该规则进行选择，您将看到更好的性能。

它的启动速度会更快，更易读。

CSS：

.float-left float:left

Javascript：

$('.float-left');

【讨论】：

我刚回来又看了一遍这个问题，现在有点尴尬。这绝对是最好的解决方案。我无法想象为什么我需要选择这样的元素......

【参考方案3】：

嗯，我不知道我是否会这样处理。为什么不用一致的 ID 或类名重命名这些元素，然后选择它？

如果这不是一个选项，这应该可行：

this.getElementsByTagName('div').item(0).style.float = 'left';

我认为。

【讨论】：

这行不通。您的代码选择所有 div，将选择减少到第一个 div，然后将其浮动设置为左。