ウェブ開発をしていると、特定の要素を表示したり非表示にしたりする必要がよくあります。この記事では、JavaScriptを使って要素の表示/非表示を切り替える方法を4つ紹介します。それぞれの方法には特長があるので、自分のプロジェクトに合った方法を選んでください。
CSSのdisplayプロパティを使う方法
displayプロパティを使って要素を非表示にする最も基本的な方法です。この方法では、非表示にする要素にクラスを追加し、そのクラスにdisplay: none;を指定します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Display</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<button id="toggleButton">表示/非表示</button>
<div id="toggleElement">これは切り替えられる要素です。</div>
<script>
document.getElementById('toggleButton').addEventListener('click', function() {
var element = document.getElementById('toggleElement');
if (element.classList.contains('hidden')) {
element.classList.remove('hidden');
} else {
element.classList.add('hidden');
}
});
</script>
</body>
</html>CSSのvisibilityプロパティを使う方法
visibilityプロパティを使うと、要素の表示状態を変更することができます。この方法では、要素を非表示にしてもレイアウトはそのまま保持されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Visibility</title>
<style>
.invisible {
visibility: hidden;
}
</style>
</head>
<body>
<button id="toggleButton">表示/非表示</button>
<div id="toggleElement">これは切り替えられる要素です。</div>
<script>
document.getElementById('toggleButton').addEventListener('click', function() {
var element = document.getElementById('toggleElement');
if (element.classList.contains('invisible')) {
element.classList.remove('invisible');
} else {
element.classList.add('invisible');
}
});
</script>
</body>
</html>style.displayを直接操作する方法
style.displayを直接操作することで、JavaScriptから要素の表示/非表示を切り替えることができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Display</title>
</head>
<body>
<button id="toggleButton">表示/非表示</button>
<div id="toggleElement" style="display: none;">これは切り替えられる要素です。</div>
<script>
document.getElementById('toggleButton').addEventListener('click', function() {
var element = document.getElementById('toggleElement');
if (element.style.display === 'none') {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
});
</script>
</body>
</html>jQueryを使用する方法
もしjQueryを使用している場合、さらに簡単に表示/非表示を切り替えることができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Display with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="toggleButton">表示/非表示</button>
<div id="toggleElement">これは切り替えられる要素です。</div>
<script>
$('#toggleButton').on('click', function() {
$('#toggleElement').toggle();
});
</script>
</body>
</html>まとめ
JavaScriptで要素の表示/非表示を切り替える方法はいくつかあります。どの方法を選ぶかは、プロジェクトの要件や好みによります。それぞれの方法を試して、自分に最適な方法を見つけてください。
