勉強したことのメモ

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

  関連記事

jQueryで後から追加された要素にイベントを設定

jQueryで.html()等を使って追加した要素に対してイベントを設定したかっ ...

jQueryプラグインのDateTimePickerで年月日と時間のピッカーを実装する方法

jQueryで年月日と時間を選択できるピッカーを導入したかった。以前にboots ...

FullCalendarでラベルごとに表示・非表示を切り替える方法

Googleカレンダーだとページ左側にマイカレンダーというのがあり、その中に任意 ...

jQueryでコンテンツのスライド

jQueryもしくはJavaScriptでリンクを押すと 右から左にコンテンツを ...

jQueryのトースト(通知)用ライブラリ「iziToast.js」の利用方法

システム構築の際、エラー表示をJavaScriptのアラートではなくトースト(通 ...