JavaScriptによる 'div'の表示/非表示

私が作成しているウェブサイトでは、1つのdivを読み込み、もう1つを隠し、JavaScriptを使ってdiv間の表示を切り替える2つのボタンを用意したいと考えています。

これは私の現在のコードです。

function replaceContentInContainer(target, source) {
  document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
}

function replaceContentInOtherContainer(replace_target, source) {
  document.getElementById(replace_target).innerHTML = document.getElementById(source).innerHTML;
}
<html>
<button onClick="replaceContentInContainer('target', 'replace_target')">View Portfolio</button>
<button onClick="replaceContentInOtherContainer('replace_target', 'target')">View Results</button>

<div>
  <span id="target">div1</span>
</div>

<div style="display:none">
  <span id="replace_target">div2</span>
</div>

div2を置換する2つ目の関数は動作しませんが、1つ目の関数は動作します。

Teocci
編集された質問 23日 1月 2019 в 7:46
プログラミング
javascript html onclick
12日 1月 2014 в 1:12
15 ビュー
ソリューション

How to show or hide an element:

要素の表示・非表示を切り替えるには、その要素の[styleプロパティ][1]を操作します。ほとんどの場合、要素のdisplay`プロパティを変更するだけでよいでしょう。

element.style.display = 'none';           // Hide
element.style.display = 'block';          // Show
element.style.display = 'inline';         // Show
element.style.display = 'inline-block';   // Show

また、要素がスペースを占めるようにしたい場合（テーブルのセルを隠す場合など）は、代わりに要素のvisibility`プロパティを変更することができます。

element.style.visibility = 'hidden';      // Hide
element.style.visibility = 'visible';     // Show

要素の集合体を非表示にする。

要素の集合体を隠したい場合は、各要素を反復して、その要素の〜の display を none に変更するだけです。

function hide (elements) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = 'none';
  }
}
// Usage:
hide(document.querySelectorAll('.target'));
hide(document.querySelector('.target'));
hide(document.getElementById('target'));
hide(document.querySelectorAll('.target'));

function hide (elements) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = 'none';
  }
}
<div class="target">This div will be hidden.</div>

<span class="target">This span will be hidden as well.</span>

要素の集まりを表示します。

ほとんどの場合、display: noneとdisplay: blockを切り替えるだけでしょうから、要素の集合体を表示する場合は、以下のようにすれば*十分かもしれません。

デフォルトでblockにしたくない場合は、オプションで2番目の引数に希望のdisplayを指定することができます。

function show (elements, specifiedDisplay) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = specifiedDisplay || 'block';
  }
}
// Usage:
var elements = document.querySelectorAll('.target');
show(elements);

show(elements, 'inline-block'); // The second param allows you to specify a display value
var elements = document.querySelectorAll('.target');

show(elements, 'inline-block'); // The second param allows you to specify a display value

show(document.getElementById('hidden-input'));

function show (elements, specifiedDisplay) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = specifiedDisplay || 'block';
  }
}
<div class="target" style="display: none">This hidden div should have a display of 'inline-block' when it is shown.</div>

<span>Inline span..</span>

<input id="hidden-input" />

あるいは、要素を表示するためのより良い方法は、単にインラインの display スタイルを削除して、初期状態に戻すことです。そして、要素の計算されたdisplayスタイルをチェックして、カスケードされたルールによって隠されているかどうかを判断します。もしそうなら、その要素を表示します。

function show (elements, specifiedDisplay) {
  var computedDisplay, element, index;

  elements = elements.length ? elements : [elements];
  for (index = 0; index < elements.length; index++) {
    element = elements[index];

    // Remove the element's inline display styling
    element.style.display = '';
    computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');

    if (computedDisplay === 'none') {
        element.style.display = specifiedDisplay || 'block';
    }
  }
}
show(document.querySelectorAll('.target'));

function show (elements, specifiedDisplay) {
  var computedDisplay, element, index;

  elements = elements.length ? elements : [elements];
  for (index = 0; index < elements.length; index++) {
    element = elements[index];

    // Remove the element's inline display styling
    element.style.display = '';
    computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');

    if (computedDisplay === 'none') {
        element.style.display = specifiedDisplay || 'block';
    }
  }
}
<span class="target" style="display: none">Should revert back to being inline.</span>

<span class="target" style="display: none">Inline as well.</span>

<div class="target" style="display: none">Should revert back to being block level.</div>

<span class="target" style="display: none">Should revert back to being inline.</span>

(さらに一歩進めたい場合は、jQueryが行うことを真似て、要素を(競合するスタイルシートのない)空白のiframeに追加することで、要素'のデフォルトのブラウザのスタイリングを決定し、計算されたスタイリングを取得することもできます。そうすることで、要素の真の初期 display プロパティ値を知ることができ、望ましい結果を得るために値をハードコーディングする必要がなくなります)。

表示の切り替えを行います。

同様に、要素や要素の集合体の表示を切り替えたい場合は、単純に各要素を反復して、displayプロパティの計算値をチェックすることで、その要素が表示されているかどうかを判断することができます。表示されている場合は display を none に設定し、そうでない場合はインラインの display スタイリングを削除し、まだ隠れている場合は display を指定された値またはハードコードされたデフォルトの block に設定します。

function toggle (elements, specifiedDisplay) {
  var element, index;

  elements = elements.length ? elements : [elements];
  for (index = 0; index < elements.length; index++) {
    element = elements[index];

    if (isElementHidden(element)) {
      element.style.display = '';

      // If the element is still hidden after removing the inline display
      if (isElementHidden(element)) {
        element.style.display = specifiedDisplay || 'block';
      }
    } else {
      element.style.display = 'none';
    }
  }
  function isElementHidden (element) {
    return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
  }
}
// Usage:
document.getElementById('toggle-button').addEventListener('click', function () {
  toggle(document.querySelectorAll('.target'));
});
document.getElementById('toggle-button').addEventListener('click', function () {
    toggle(document.querySelectorAll('.target'));
});

function toggle (elements, specifiedDisplay) {
  var element, index;

  elements = elements.length ? elements : [elements];
  for (index = 0; index < elements.length; index++) {
    element = elements[index];

    if (isElementHidden(element)) {
      element.style.display = '';

      // If the element is still hidden after removing the inline display
      if (isElementHidden(element)) {
        element.style.display = specifiedDisplay || 'block';
      }
    } else {
      element.style.display = 'none';
    }
  }
  function isElementHidden (element) {
    return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
  }
}
.target { display: none; }
Toggle display

<span class="target">Toggle the span.</span>

<div class="target">Toggle the div.</div>

[1]： https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

Josh Crozier
編集した答え 4日 11月 2015 в 6:49
解説 (0)

問題のdivのスタイルを操作すればいいのですが...。

document.getElementById('target').style.display = 'none';
解説 (1)

スタイルを使う


   .hidden {
        display: none;
   {
   .visible {
        display: block;
   }

HTMLのonclick=""属性よりも、JavaScriptでイベントハンドラを使用する方が良いでしょう。

View Portfolio
View Results

<div class="visible" id="portfolio">
    <span>div1</span>
</div>

<div class"hidden" id="results">
    <span>div2</span>
</div>

JavaScriptです。

<script type="text/javascript">

    var portfolioDiv = document.getElementById('portfolio');
    var resultsDiv = document.getElementById('results');

    var portfolioBtn = document.getElementById('RenderPortfolio_Btn');
    var resultsBtn = document.getElementById('RenderResults_Btn');

    portfolioBtn.onclick = function() {
        resultsDiv.setAttribute('class', 'hidden');
        portfolioDiv.setAttribute('class', 'visible');
    };

    resultsBtn.onclick = function() {
        portfolioDiv.setAttribute('class', 'hidden');
        resultsDiv.setAttribute('class', 'visible');
    };

</script>

jQueryを使うと、DOM要素を簡単に操作できるようになるかもしれません。

Peter Mortensen
編集した答え 12日 7月 2014 в 10:21
解説 (1)