[JavaScript] ブラウザ上の要素の表示/非表示を切替える（非表示時も詰まらない）

投稿日：2016年10月2日更新日：2018年4月28日

ブラウザ表示上の指定した箇所の表示/非表示を切り替えるサンプルです。
非表示時も表示領域は詰まりません。

要素の表示/非表示を切替える（非表示時も詰まらない）

例）ボタンを押す毎にid="target"の要素の表示/非表示を切り替える

function changeVisible(){
  var str = document.getElementById("target");
  if(str.style.visibility == "visible"){
    str.style.visibility = "hidden";
  }else{
    str.style.visibility = "visible";
  }
}

function changeVisible(){

var str = document.getElementById("target");

if(str.style.visibility == "visible"){

str.style.visibility = "hidden";

}else{

str.style.visibility = "visible";

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Sample</title>
  <script src="sample.js"></script>
</head>
<body>
  <p id="target" style="background-color:yellow;">表示切替領域</p>
  <input type="button" value=" 表示/非表示を切替える " onclick="changeVisible();" />
</body>
</html>

<!DOCTYPE html>

<head>

<title>Sample</title>

</head>

<body>

<p id="target" style="background-color:yellow;">表示切替領域</p>

</body>

</html>

実行サンプル

ボタンを押すと、黄色い枠の部分の表示/非表示が切り替わります。

表示切替領域

解説

style.visibilityで表示/非表示を切替えるこの方法だと、非表示した場合でも領域はそのまま表示されます。（非表示にした部分は空白領域になります。）
非表示にしたときに領域を保持しておきたい場合は、style.displayを使用します。
詳しくは「ブラウザ上の要素の表示/非表示を切替える（非表示時は詰まる）」をご覧ください。

執筆者：とら