ブラウザ表示上の指定した箇所の表示/非表示を切り替えるサンプルです。
非表示時は表示領域が詰まって表示されます。
サンプルソース
例）ボタンを押す毎に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を使用します。
詳しくは「ブラウザ上の要素の表示/非表示を切替える（非表示時も詰まらない）」をご覧ください。
