jquery - 选择具有指定 css 规则集的 dom 元素

Question

我知道如何按属性选择元素，如下所示:

<input value="myvalue" />
$('input[value="myvalue"]')

但是如何才能选择具有指定 css 规则集的 dom 元素呢？例如，我需要选择所有设置了 css“背景位置”的元素；

Answer 1

似乎没有 jQuery selector为此，但您可以使用 .filter() 来减少选择器以满足您的需求:

$('div').filter(function() {
    return ($(this).css('backgroundPosition')); // tests for existence
});

但是，这里的问题是，即使未设置“background-position”，某些浏览器也会将其设置为默认值。您必须与这些默认值进行比较，但您无法判断这些值是否已在样式表中显式设置。

(更新: IE8 无论如何都会将 $(this).css('backgroundPosition') 返回为“未定义”。 workaround 是为了测试 '分别设置为“backgroundPositionX”和/或“backgroundPositionY”。但是，虽然默认值应该为“0%”，但 IE8 报告默认值“0px”。对两者进行测试。)

(更新 2: Firefox 不返回单个属性，仅返回组合的“背景位置”；IE8 不返回组合属性，仅返回单个属性。Webkit 会同时返回这两个属性。)

$('div').filter(function() {
   return ($(this).css('backgroundPosition') !== "0% 0%" // firefox, webkit
        && $(this).css('backgroundPositionX') !== "0px"  // ie8
        && $(this).css('backgroundPositionY') !== "0px");
});

http://jsfiddle.net/mblase75/s8dx2/23/