jQueryを使って要素をdisplay: none
にする方法と、要素がdisplay: none
であるかを判定する方法を紹介します。
目次
jQueryで要素をdisplay:noneにする方法
jQueryで要素をdisplay: none
にするには.hide()
を使います。
1 |
$('#elem').hide(); |
要素に.hide()
を使っても効かない場合はCSSで!important
が指定されている可能性があります。
その場合の対処法については以下の記事で紹介しているので参照してください。
.hide()
で要素を非表示にすると、その要素のタグにはインラインCSSでdisplay: none
が設定されます。
1 |
<div id="elem" style="display: none;">TAKALOG</div> |
jQueryで要素がdisplay:noneかを判定する方法
jQueryで要素のdisplayがnoneであるかを判定する方法を3つ紹介します。
is(‘:visible’)で判定
:visible
は表示されている要素を抽出します。
マッチした要素があるかを判断する.is()
と組み合わせることで、表示されている要素がdisplay: none
かどうかの判定に使えます。
1 |
var bool = $('#elem').is('visible'); |
デモ
「toggle」ボタンのクリックで#demo-01
の要素の表示・非表示を切り替え、「check」ボタンのクリックでその要素の現在の状態をチェックします。
1 2 3 4 |
<div id="demo-01"></div> <button id="btn-toggle-01">toggle</button> <button id="btn-check-01">check</button> <div id="msg-01">要素の状態:表示</div> |
1 2 3 4 5 |
#demo-01 { background: red; width: 100px; height: 100px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(function() { // toggleボタン $('#btn-toggle-01').click(function() { $('#demo-01').toggle(); }); // checkボタン $('#btn-check-01').click(function() { var state = ''; if ($('#demo-01').is(':visible')) { state = '表示'; } else { state = '非表示'; } $('#msg-01').text('要素の状態:' + state); }); }); |
:hidden
は:visible
とは逆で非表示の要素を抽出します。
こちらも.is()
と組み合わせることで表示されている要素がdisplay: none
かどうかの判定に使えます。
1 |
var bool = $('#elem').is('hidden'); |
デモ
「toggle」ボタンのクリックで#demo-02
の要素の表示・非表示を切り替え、「check」ボタンのクリックでその要素の現在の状態をチェックします。
1 2 3 4 |
<div id="demo-02"></div> <button id="btn-toggle-02">toggle</button> <button id="btn-check-02">check</button> <div id="msg-02">要素の状態:表示</div> |
1 2 3 4 5 |
#demo-02 { background: blue; width: 100px; height: 100px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(function() { // toggleボタン $('#btn-toggle-02').click(function() { $('#demo-02').toggle(); }); // checkボタン $('#btn-check-02').click(function() { var state = ''; if ($('#demo-02').is(':hidden')) { state = '非表示'; } else { state = '表示'; } $('#msg-02').text('要素の状態:' + state); }); }); |
css(‘display’)で判定
.css()
は第一引数にCSSプロパティを指定するとその値が取得できます。
display
の値を取得することでdisplay: none
かどうかの判定に使えます。
1 |
var value = $('#elem').css('display'); |
デモ
「toggle」ボタンのクリックで#demo-03
の要素の表示・非表示を切り替え、「check」ボタンのクリックでその要素の現在の状態をチェックします。
1 2 3 4 |
<div id="demo-03"></div> <button id="btn-toggle-03">toggle</button> <button id="btn-check-03">check</button> <div id="msg-03">要素の状態:表示</div> |
1 2 3 4 5 |
#demo-03 { background: green; width: 100px; height: 100px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(function() { // toggleボタン $('#btn-toggle-03').click(function() { $('#demo-03').toggle(); }); // checkボタン $('#btn-check-03').click(function() { var state = ''; if ($('#demo-03').css('display') == 'none') { state = '非表示'; } else { state = '表示'; } $('#msg-03').text('要素の状態:' + state); }); }); |