Jquery: Select Style Attribute?

How to select with a specific style attribute?

I'm trying: $('div[style='width: 420

Solution 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.

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

Solution 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")

Solution 4:

maybe try

$('div').filter(function() {
    varself = $(this);
    returnself.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.

Solution 5:

<h1>Hello header</h1><pstyle="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

Share