Andrew Andrew - 5 months ago 10
Javascript Question

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

There is an image on this page http://www.robertsroofing.com/services-view/leak-repair/ 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="http://www.robertsroofing.com/wp-content/uploads/2014/11/icon-leak-tile.png" alt="Reliable Commercial Roof Leak Repair" style="display: inline;"></figure>
</article>
<script>
$(document).ready(function(){
$('.type-services .thumbnail img').attr('style','display: none');
})
</script>


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.

Answer

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();