勉強したことのメモ

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プラグインを作ってみたかった。というのも大抵のものはググ ...

簡単にtable内をソート

やりたかった事は、 ・テーブル内でのソート ・内容は文字、数値、日時 ・PHPじ ...

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

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

ラジオボタンのカスタムデータ属性を取得し、特定の値の場合はチェックさせない方法

ASPを使用したサイトで特定のradioボタンは選択不可にしたいというケースがあ ...

jQueryでチェックボックスの全チェック&チェック解除する方法

フォームのチェックボックスで「全てにチェックを入れる」「全てのチェックを外す」と ...