Andrew Andrew - 4 months ago 8x
Javascript Question

How to override an inline style that is apparently set by javascript?

There is an image on this page specifically the orange water droplet icon above the photo. I want to hide this (display: none) but can't seem to target via css. So i also tried to add some javascript at the bottom of the page but that doesn't work either. Maybe it's not targeting right but I feel I tried everything.

<article id="post-1975" class="post__holder post-1975 services type-services status-publish has-post-thumbnail hentry">
<figure class="featured-thumbnail thumbnail large"><img src="" alt="Reliable Commercial Roof Leak Repair" style="display: inline;"></figure>
$('.type-services .thumbnail img').attr('style','display: none');

I do need to specifically target the parent .type-services class as this template is shared with other content. I just need the image hidden when the .type-services class is used.


The element has an inline style of display: inline;. This is why your CSS override is not working. Inline styles always take precedence over CSS rules, regardless of how specific your selector is.

inline style

There are 2 ways you can fix this. 1 is in your CSS, just add !important to force override of the style:

article.type-services figure.thumbnail > img { display: none !important; }

or, if you want to stick with the jquery method, fix your selector to target the correct class - you have a typo in 'thumbnail'. Also, you should use the 'css' function, rather than completely overriding the 'style' attribute.

$('.type-services .thumbnail img').css('display', 'none');

or just use the hide method

$('.type-services .thumbnail img').hide();