使用jQuery根据内联CSS属性查找元素

Question

我需要根据特定的 css 属性查找元素。这个 css 属性是内联样式，不能使用类来查找。 在 jQuery 中有没有办法实现这个功能？

- user96931

Answer 1

你可以使用attribute选择器。

例如：

$(":radio [style*='regular']")

会返回一个包含任何输入单选框的包装集，其中样式属性中包含'regular'

- Russ Cam

---

如果我们需要基于两个值 left: 180px 和 top:360px 进行选择，该怎么办？ - Kaleem Sajid

你只需要使用多个属性选择器，例如 $("[left='180px'][top='360px']")。 - Russ Cam

链接已损坏。 - Tomas

Answer 2

我认为这是最简洁的解决方案。比如说你想找到所有z-index具有特定值的元素：

$('*').filter(function () { return $(this).css('z-index') == 101 })

- Tomas

Answer 3

我认为你可以编写一个自定义的 jQuery 选择器来实现这个功能。

例如，如果你想根据特定的样式属性进行选择，你可以这样做：

 jQuery.extend(jQuery.expr[':'], {
    styleEquals: function(a, i, m){
        var styles = $(a).attr("style").split(" ")
        var found = false;
        for (var i = 0; i < styles.length; i++) {
            if (styles[i]===m[3]) {
                found = true;
                break;
            }
        }
        return found;
    }
});

然后它可以与任何其他选择器结合使用，您可以像这样选择具有特定样式的所有输入元素:

$('input:styleEquals('width=10px')')

- Surya

---

这个功能已经包含在jQuery语言中了。你所需要做的就是使用$('selector[cssAttribute = value]')。 - Scott Baker

jQuery内置选择器仅在完全匹配时起作用，因此只有当style =“absolute;”而不是style =“absolute; left”时才会匹配。因此，我发布的解决方案是查找所有具有绝对值的元素，而不仅仅是精确匹配。 - Surya

@Surya：是的，我得了一种很糟糕的脑肠炎。不知道当时我在想什么。 - Scott Baker

在这一行代码 if (styles[i].equals(m[3])) 中，我得到了“styles[i].equals(m[3])不是一个函数”的错误。 - user96931

@Sammy，我更新了代码...我一开始没有测试它，只是在浏览器中打了出来。 - Surya

@Surya，谢谢Surya。我已经使用===进行了更改。 现在，如果像这样调用它 var ele = $("span:styleEquals('overflow=auto')"); alert(ele.Id); 警报始终未定义。 - user96931

Answer 4

是的，我认为实现所需结果的最快、最简单的方法是使用属性类选择器定位样式。

就像之前所述：

$('div.yourClass[style*="background-color:Blue"]).css('color', 'White');

这样我们就可以针对所有具有蓝色背景的相同类别的div，告诉它们都使用白色文本颜色。当然，我们可以在此处使用任何东西，例如 .animate 并告诉所有蓝色进行动画处理等等。这对于数据库关系和人们在数据库中设置奇怪的事情帮助了我很多。

我曾经不够通用，使用 :contains 来定位字符串...但是有人去基地，更改文本和标签，代码就无法使用了；)

希望这可以帮到你。

- sBo

---

您的代码中有一个拼写错误。$('div.yourClass[style*="background-color:Blue"]').css('color', 'White'); - Haseeb Zulfiqar

Answer 5

像这样的：

$('selector').each(function() {
    if($(this).attr('style').indexOf('font-weight') > -1) {
        alert('got my attribute');
    }
});

- karim79

---

.indexOf 可以返回 0，这将被评估为 false。 - mkoryak

Answer 6

var ccsStyle="font-weight:bold";
var els = [];
$("*").each(function(){
  var st = $(this).attr("style");
  if(st.indexOf(cssStyle) > -1) els.push(this);
});
//do stuff with els

- mkoryak

Answer 7

您可以使用.attr()来搜索任何内联属性.. .attr('attr_name')

http://api.jquery.com/attr/

css_inline_value = $(element).attr('style');

if (css_inline_value = search_value) {
    // do stuff
}

- Mihnea Belcin

Answer 8

如果您知道特定的格式，可以使用属性标志并使用包含。

$("[style*='position']")

这将找到所有定义位置 CSS 属性的元素。

- MacAnthony