jQuery｜要素をdisplay:noneで隠す方法と表示・非表示を判定する方法

jQueryを使って要素をdisplay: noneにする方法と、要素がdisplay: noneであるかを判定する方法を紹介します。

1 jQueryで要素をdisplay:noneにする方法
2 jQueryで要素がdisplay:noneかを判定する方法

jQueryで要素をdisplay:noneにする方法

jQueryで要素をdisplay: noneにするには.hide()を使います。

$('#elem').hide();

1	$('#elem').hide();

要素に.hide()を使っても効かない場合はCSSで!importantが指定されている可能性があります。

その場合の対処法については以下の記事で紹介しているので参照してください。

jQuery｜要素の表示・非表示を切り替えるshow、hide、toggleの使い方

jQueryを使って要素の表示・非表示を切り替える方法を紹介します。showやhideが効かない場合の対処法についても触れます。

takalog.jp

.hide()で要素を非表示にすると、その要素のタグにはインラインCSSでdisplay: noneが設定されます。

<div id="elem" style="display: none;">TAKALOG</div>

1	<div id="elem" style="display: none;">TAKALOG</div>

jQueryで要素がdisplay:noneかを判定する方法

jQueryで要素のdisplayがnoneであるかを判定する方法を3つ紹介します。

is(‘:visible’)で判定

:visibleは表示されている要素を抽出します。

マッチした要素があるかを判断する.is()と組み合わせることで、表示されている要素がdisplay: noneかどうかの判定に使えます。

var bool = $('#elem').is('visible');

1	var bool = $('#elem').is('visible');

デモ

「toggle」ボタンのクリックで#demo-01の要素の表示・非表示を切り替え、「check」ボタンのクリックでその要素の現在の状態をチェックします。

要素の状態：表示

<div id="demo-01"></div>
<button id="btn-toggle-01">toggle</button>
<button id="btn-check-01">check</button>
<div id="msg-01">要素の状態：表示</div>

<button id="btn-toggle-01">toggle</button>

<button id="btn-check-01">check</button>

<div id="msg-01">要素の状態：表示</div>

#demo-01 {
  background: red;
  width: 100px;
  height: 100px;
}

#demo-01 {

background: red;

width: 100px;

height: 100px;

}

$(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);
    });
});

$(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);

});

is(‘:hidden’)で判定

:hiddenは:visibleとは逆で非表示の要素を抽出します。

こちらも.is()と組み合わせることで表示されている要素がdisplay: noneかどうかの判定に使えます。

var bool = $('#elem').is('hidden');

1	var bool = $('#elem').is('hidden');

デモ

「toggle」ボタンのクリックで#demo-02の要素の表示・非表示を切り替え、「check」ボタンのクリックでその要素の現在の状態をチェックします。

要素の状態：表示

<div id="demo-02"></div>
<button id="btn-toggle-02">toggle</button>
<button id="btn-check-02">check</button>
<div id="msg-02">要素の状態：表示</div>

<button id="btn-toggle-02">toggle</button>

<button id="btn-check-02">check</button>

<div id="msg-02">要素の状態：表示</div>

#demo-02 {
  background: blue;
  width: 100px;
  height: 100px;
}

#demo-02 {

background: blue;

width: 100px;

height: 100px;

}

$(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);
    });
});

$(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かどうかの判定に使えます。

var value = $('#elem').css('display');

1	var value = $('#elem').css('display');

デモ

「toggle」ボタンのクリックで#demo-03の要素の表示・非表示を切り替え、「check」ボタンのクリックでその要素の現在の状態をチェックします。

要素の状態：表示

<div id="demo-03"></div>
<button id="btn-toggle-03">toggle</button>
<button id="btn-check-03">check</button>
<div id="msg-03">要素の状態：表示</div>

<button id="btn-toggle-03">toggle</button>

<button id="btn-check-03">check</button>

<div id="msg-03">要素の状態：表示</div>

#demo-03 {
  background: green;
  width: 100px;
  height: 100px;
}

#demo-03 {

background: green;

width: 100px;

height: 100px;

}

$(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);
    });
});