Question

我知道如何按属性选择元素：

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

但是如何选择具有指定css规则集的dom元素。例如，我需要选择css“background-position”设置的所有元素;

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不返回单个属性，只合并'background-position'; 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/

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

1 个答案: