jQuery: select style attribute?

Question

How to select with a specific style attribute?

Answer 1

<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

Answer 2

(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 3

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 4

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 5

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";
});