勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

「display: block !important;」指定された要素をjQueryで非表示にする方法

  jQuery JavaScript

jQueryで特定の要素を非表示にしたかったのでhide()を使用したところ非表示にならなかった。どうもCSS側で当該要素が「display: block !important;」指定されており、これが原因で非表示にならないっぽい。以下に対応方法をメモ。

 

対応方法

ソースコード

<style>
#test_div{
    display: block !important;
    width: 300px;
    height: 300px;
    background-color: #f00;
}
</style>

<div id="test_div">display:block !important;が効いているエリア</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function(){
    //非表示にならない
    $(`#test_div`).hide();

    //非表示になる
    $(`#test_div`).attr(`style`, `display: none !important`);
});
</script>

 

所感

!important指定をさらに!important指定しており、やや無理やり感があるものの、CSS側を変更できないような場合(いただいたコーディングデータとかの場合)はこのような方法を取らざるを得ないかも。

 

参考サイト

https://stackoverflow.com/questions/18784593/display-none-important-need-to-override-by-using-jquery

 - jQuery JavaScript

  関連記事

ブラウザのSafariのみスクロール関連のイベントが発火しない場合の対応方法

jQueryで一定距離スクロールさせた場合に発火するイベントをプログラムしていた ...

「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法

「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...

amazon等のECサイトによくにあるアイテムの満足度を星マークで送信・表示する方法

amazon等のECサイトによくにあるアイテムの満足度を星マークかつ5段階で送信 ...

jQueryで指定した可変(レスポンシブ)要素のposition / width / heightを取得する方法

jQueryで指定した要素のposition(leftやtop) / width ...

JavaScriptで数値のカウントアップ及びカウントダウン

JavaScript(一部jQuery)で数値のカウントアップ及びカウントダウン ...