「display: block !important;」指定された要素をjQueryで非表示にする方法
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
関連記事
-
-
formでファイルを選択した際にファイル名やサイズ、形式を調べる方法
フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...
-
-
フォームの入力内容をjQueryで取得し、本文として設定した上でメーラーを起動させる方法
formで何らかを入力してもらいボタンをクリックするとメーラーが開き、先ほど入力 ...
-
-
jQueryで後から追加された要素にイベントを設定
jQueryで.html()等を使って追加した要素に対してイベントを設定したかっ ...
-
-
JSやjQueryで動的に追加した要素に対して「slick」でスライダーを実行する方法
外部サーバからAjax等で画像URLを取得したものをimgタグとしてページ内に描 ...
-
-
「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法
「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...