勉強したことのメモ

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

  関連記事

要素の点滅

やりたかった事はaタグ内で囲まれている部分を点滅。 <blink>だ ...

formのtextareaに文字を入力した内容をリアルタイムプレビューする方法

textarea内に書いた内容をリアルタイムでプレビューする機能が必要になった。 ...

セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法

セレクトメニュー(プルダウン)に対してdisplay:none;指定したりjQu ...

Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...

jQueryからAjax経由でPHPにリクエストしCookieを操作する方法

先日PHPでCookie保存時にHttpOnly / Secure属性を設定する ...