Question

如何选择特定的样式属性？

<div style="width: 420px; text-align: left; margin-top: 10px; margin-bottom: 10px;">

我正在尝试：

$("div[style='width: 420px; text-align: left; margin-top: 10px; margin-bottom: 10px;']);

但没有被选中。

Answer 1

你的例子适用于我，至少在Chrome中，一旦我纠正了缺失的错误“在行尾。”

$("div[style='width: 420px; text-align: left; margin-top: 10px; margin-bottom: 10px;']");

See this demo.

Answer 2

据我所知，使用jQuery选择器无法做到这一点，但你可以改用filter()方法：

$("div").filter(function() {
    var $this = $(this);
    return $this.css("width") == "420px"
        && $this.css("text-align") == "left"
        && $this.css("margin-top") == "10px"
        && $this.css("margin-bottom") == "10px";
});

Answer 3

（这不回答问题。但是，如果编写HTML页面的人使用了类而不是样式属性，则OP不会出现此问题。）

.foo { width: 420px; text-align: left; margin-top: 10px; margin-bottom: 10px; }

<div class="foo"> </div>

$("div.foo")

Answer 4

也许试试

$('div').filter(function() {
    var self = $(this);
    return self.width() === 420 &&
           self.css('margin-top') === '10px' &&
           self.css('margin-bottom') === '10px' &&
           self.css('text-align') === 'left';
});

然而，通过一个属性（如id或css类）选择元素，或者通过它的位置选择具有id或css类的元素会更容易。

Answer 5

<h1>Hello header</h1>
<p style="color: red;">Hello My</p>
<script>
$(document).ready(function(){
$("p[style='color: red;']").fadeOut("10000",function(){
    $("h1").hide();
});
});
</script>

样式应与

标记和$选择器中的样式完全相同

jQuery：选择样式属性？

5 个答案: