Targeting a DOM element with JQuery inline style property

Question

I am trying to target a div with a specific style using jQuery. I initially read over a similar question here: jQuery: select style attribute?.

I am unable to target with an id selector as I don't have access to the markup that makes up the page I am styling, only the header and the footer. I know it's messy but it's the only solution I've got.

Anyways, I had been doing things like this to override the different css properties of each of the elements:

 $('Dom element').css({
           "CSS property": "CSS Value"
 });

and it was working perfectly. However the issue I am having is I'm trying to target an element that has no id, name, alt or class it is just a div with some inline css.

I attempted to do this:

 $("div[style='margin:0 auto;width:74px;']").css("width", "100%");

But that did not work. I then did this:

console.log($("div[style='margin:0 auto;width:74px;']"));

and I can see the div being output in the developers console. I'm wondering If I'm missing something? Again, I know it's probably not best practice the way I'm going about this, but I've no alternatives.

This is the html of the particular div I am trying to access and modify:

<div style="margin:0 auto;width:74px">
      <div style="float: none;">

I should point out that I managed to target the div in the code sample above and modify the inline css through jQuery doing the following:

$("div[style='float:right;']").css({
              "float":"none"
});

So it's making me wonder If I am missing something blatantly obvious.

Anyways, thanks for any help you can provide.

This is selecting them based on the property value as a string not some interpretation of the values thus with the = selector they must match exactly including whitespace and what not - your selector has an ending ; and your element does not. Assuming those are not typos. — prodigitalson
– prodigitalson, Commented Jan 27, 2015 at 15:54
How do you know width isn't being applied? It might not appear in the console... Try adding a background color — Amit Joki
– Amit Joki, Commented Jan 27, 2015 at 15:55

prodigitalson · Accepted Answer · 2015-01-27 15:57:31Z

1

This is selecting them based on the property value as a string not some interpretation of the values thus with the = selector they must match exactly including whitespace and what not - your selector has an ending ; and your element does not. Assuming those are not typos.

answered Jan 27, 2015 at 15:57

prodigitalson

60.6k10 gold badges106 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Javacadabra Over a year ago

They weren't typos, thanks again, will accept this answer when SO allows me. Cheers

prodigitalson Over a year ago

Sounds good... just adding it as an answer for others and points ;-)

Collectives™ on Stack Overflow

Targeting a DOM element with JQuery inline style property

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related