Find element by style selector in jquery

Question

Hello everyone,

I am trying to find an element with a particular style and change its style to something else.

Here is the html element

<table style='width: 555px;'>
  <tr>
    <td>blablabla</td>
  </tr>
</table>

Now I am trying to find the table with width 555px and change it to 650px using jquery.

$('table[style*=width:555px]').css("width", "610px");

But this is not working. Can somebody spark an idea please?

NOTE: For some reason I cannot change the html.

Answer 1

Well the obvious issue is that your element is a <table> and your jQuery selector is selecting all <div> s.

I'd imagine there's also an issue with whitespace too, as your HTML contains spacing within the style element but your selector doesn't. (I may be wrong here, not experienced with the E[a*=v] selector.)

Answer 2

Is there a style selector in jQuery?

Answer 3

Beware of spaces :)

And you should quote the value with " or '.

$('table[style*="width: 555px"]').css("width", "610px");

If it does not work in IE, you could try to remove the space? (totally untested!)

$('table[style*="width: 555px"],table[style*="width:555px"]')
    .css("width", "610px");

Answer 4

$('table').filter(function() {
    return $(this).css('width') == '555px';
}).css("width", "610px");