ブラウザ表示上の指定した箇所の表示/非表示を切り替えるサンプルです。
非表示時は表示領域が詰まって表示されます。
サンプルソース
例）ボタンを押す毎にid="target"の要素の表示/非表示を切り替える
|
1 2 3 4 5 6 7 8 |
function changeDisplay(){ var str = document.getElementById("target"); if(str.style.display == "none"){ str.style.display = "block"; }else{ str.style.display = "none"; } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script src="sample.js"></script> </head> <body> <p id="target" style="background-color:yellow;">表示切替領域</p> <input type="button" value="表示/非表示を切替える" onclick="changeDisplay();" /> </body> </html> |
実行サンプル
ボタンを押すと、黄色い枠の部分の表示/非表示が切り替わります。
表示切替領域
解説
- style.displayで表示/非表示を切替えるこの方法だと、非表示した場合にもともとあった領域が無くなって表示されます。（非表示にした部分は詰まって表示されます。）
- 非表示にしたときに領域を保持しておきたい場合は、style.visibilityを使用します。
詳しくは「ブラウザ上の要素の表示/非表示を切替える（非表示時も詰まらない）」をご覧ください。
こんにちは。
大変参考になる情報をありがとうございます！
現在Javascriptを勉強し始めたばかりで、非常に初歩的な問題で申し訳ないのですが質問させてください。
サンプルデータではid="target"が1つだけしか非表示になりません。
id="target"で指定した複数のブラウザ上の要素を非表示にするためにはwhileを使えば良いのだと思いますが、
whileで指定のidタグが無くなるまで動作を繰り返させる書き方がよくわかりません。
もしよろしければご教授お願いできないでしょうか？
コメントありがとうございます
返信遅くなりすみません
以下は、対象ターゲットをString配列で指定して、
配列に指定されたすべての対象に対して動作を繰り返すサンプルです。
実行すると、target1、2、3のみ非表示になるかと思います。
----------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script>
function changeDisplay(){
//対象ターゲット
var arr = ["target1", "target2", "target3"];
//値を全件取得して表示する
arr.forEach(function(val){
var str = document.getElementById(val);
if(str.style.display == "none"){
str.style.display = "block";
}else{
str.style.display = "none";
}
});
}
</script>
</head>
<body>
<p id="target0" style="background-color:yellow;">表示切替領域0</p>
<p id="target1" style="background-color:yellow;">表示切替領域1</p>
<p id="target2" style="background-color:yellow;">表示切替領域2</p>
<p id="target3" style="background-color:yellow;">表示切替領域3</p>
<p id="target4" style="background-color:yellow;">表示切替領域4</p>
<input type="button" value="表示/非表示を切替える" onclick="changeDisplay();" />
</body>
</html>
----------