jQuery：选择样式属性？

Question

How to select with a specific style attribute?

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

I'm trying:

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

but nothing gets selected.

Answer 1

Your example works for me, in Chrome at least, once I corrected the typo of the missing " at the end of the line.

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

See this demo.

Answer 2

To my knowledge, there's no way to do that using a jQuery selector, but you can use the filter() method instead:

$("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

(This does not answer the question. However, if the person who wrote the HTML page had used classes instead of the style attribute, then the OP would not have this problem.)

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

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

$("div.foo")

Answer 4

maybe try

$('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';
});

It would be easier however to select the element by one attribute such as id or css class, or by it's position to an element that has an id or css class.

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>

The style should be exact same as of in the

tag and $ selector