javascriptによって明らかに設定されているインラインスタイルを上書きする方法は？

Question

このページに画像がありますhttp://www.robertsroofing.com/services-view/leak-repair/写真上のオレンジ色の水滴アイコン。私はこれを非表示にしたい（表示：なし）が、CSS経由でターゲットにすることはできません。だから私はまた、ページの下部にいくつかのjavascriptを追加しようとしたが、どちらも動作しません。たぶんそれは正しく目標を設定していないが、私はすべてを試して感じる。

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

このテンプレートは他のコンテンツと共有されるため、特に親の.type-servicesクラスをターゲットにする必要があります。 .type-servicesクラスが使用されているときに、イメージを非表示にするだけです。

Answer 1

要素のインラインスタイルはdisplay: inline;です。これはあなたのCSSオーバーライドが機能していない理由です。セレクタがどのように特定されているかにかかわらず、インラインスタイルは常にCSSルールよりも優先されます。

あなたがこの問題を解決することができ、2つの方法があります。 1は、単にスタイルのオーバーライドを強制的に!importantを追加し、あなたのCSSである：

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

か、あなたはjqueryのメソッドに固執したい場合は、適切なクラスをターゲットに、あなたのセレクタを修正 - あなたは "のタイプミスを持っていますサムネイル '。また、 'style'属性を完全にオーバーライドするのではなく、 'css'関数を使用する必要があります。

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

か、単にhide方法

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