web-dev-qa-db-ja.com

JavaScriptを使って 'div'を表示/隠す

私がやっているウェブサイトのために、私は1つのdivをロードし、別のものを非表示にして、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番目の関数は機能していませんが、最初の関数は機能しています。

javascripthtmlonclick
162
Jake Ols

要素を表示または非表示にする方法：

要素を表示または非表示にするには、要素の スタイルプロパティ を操作します。ほとんどの場合、おそらく要素の 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の間でトグルしているだけでしょう。それは、次のmayが要素のコレクションを表示するときに十分であることを意味します。

デフォルトのdisplayにしたくない場合は、必要に応じて2番目の引数として目的のblockを指定できます。

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プロパティの計算値を確認して確認できます。表示されている場合は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; }
<button id="toggle-button">Toggle display</button>

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

<div class="target">Toggle the div.</div>
372
Josh Crozier

jQuery JavaScriptフレームワークを使用することもできます。

Div Blockを非表示にする

$(".divIDClass").hide();

Div Blockを表示する

$(".divIDClass").show();
78
IMRUP

あなたは単に問題のdivのスタイルを操作することができます...

document.getElementById('target').style.display = 'none';
39
Leo

Js機能を使ってDivを表示/非表示にすることができます。以下のサンプル

<script>
    function showDivAttid(){

        if(Your Condition) {

            document.getElementById("attid").style.display = 'inline';
        }
        else
        {
            document.getElementById("attid").style.display = 'none';
        }
    }

</script>

HTML - 

<div  id="attid" style="display:none;">Show/Hide this text</div>
18
Rahul Sawant

スタイルを使う：

<style type="text/css">
   .hidden {
        display: none;
   {
   .visible {
        display: block;
   }
</style>

JavaScriptでイベントハンドラを使用することは、HTMLでonclick=""属性よりも優れています。

<button id="RenderPortfolio_Btn">View Portfolio</button>
<button id="RenderResults_Btn">View Results</button>

<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要素を簡単に操作するのに役立つかもしれません！

14
Ifch0o1

この単純なJavaScriptコードは非常に便利です。

#<script type="text/javascript">
    function toggle_visibility(id) 
    {
        var e = document.getElementById(id);
        if ( e.style.display == 'block' )
            e.style.display = 'none';
        else
            e.style.display = 'block';
    }
</script>
12
Mumtaj

あなたのHTMLを

<div id="body" hidden="">
 <h1>Numbers</h1>
 </div>
 <div id="body1" hidden="hidden">
 Body 1
 </div>

そして今度はjavascriptを

function changeDiv()
  {
  document.getElementById('body').hidden = "hidden"; // hide body div tag
  document.getElementById('body1').hidden = ""; // show body1 div tag
  document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; 
  // display text if JavaScript worked
   }
4
Andriya
<script type="text/javascript">
    function hide(){
        document.getElementById('id').hidden = true;
    }
    function show(){
        document.getElementById('id').hidden = false;
    }
</script>
1
Aguilar Junior

私はこの質問を見つけました、そして最近私はVue.jsを使っていくつかのUIを実装していたので、これは良い代替案になることができます。

まず、View Profileをクリックしてもコードがtargetを隠していません。コンテンツtargetをdiv2で上書きしています。

let multiple = new Vue({
  el: "#multiple",
  data: {
    items: [{
        id: 0,
        name: 'View Profile',
        desc: 'Show profile',
        show: false,
      },
      {
        id: 1,
        name: 'View Results',
        desc: 'Show results',
        show: false,
      },
    ],
    selected: '',
    shown: false,
  },
  methods: {
    showItem: function(item) {
      if (this.selected && this.selected.id === item.id) {
        item.show = item.show && this.shown ? false : !item.show;
      } else {
        item.show = (this.selected.show || !item.show) && this.shown ? true : !this.shown;
      }
      this.shown = item.show;
      this.selected = item;
    },
  },
});
<div id="multiple">
  <button type="button" v-for="item in items" v-on:click="showItem(item)">{{item.name}}</button>

  <div class="" v-if="shown">: {{selected.desc}}</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.js"></script>
0
Teocci

そしてハロゲンを使用している人々のためのPurescriptの答え：

import CSS (display, displayNone)
import Halogen.HTML as HH
import Halogen.HTML.CSS as CSS

render state = 
  HH.div [ CSS.style $ display displayNone ] [ HH.text "Hi there!" ]

「要素を調べる」とすると、次のようになります。

<div style="display: none">Hi there!</div>

しかし、予想通り、実際には画面には何も表示されません。

0
Colin Woodbury

JavaScriptを使ってShow/hide 'div'を実装するだけの単純な関数 /

<a id="morelink" class="link-more" style="font-weight: bold; display: block;" onclick="this.style.display='none'; document.getElementById('states').style.display='block'; return false;">READ MORE</a>


<div id="states" style="display: block; line-height: 1.6em;">
 text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here  
    <a class="link-less" style="font-weight: bold;" onclick="document.getElementById('morelink').style.display='inline-block'; document.getElementById('states').style.display='none'; return false;">LESS INFORMATION</a>
    </div>
0
Ashar Zafar

単純なIDのスタイル属性を設定します。

隠されたdivを表示する

<div id="xyz" style="display:none">
     ...............
</div>
//In JavaScript

document.getElementById('xyz').style.display ='block';  // to hide

表示されているdivを非表示にする

<div id="xyz">
     ...............
</div>
//In JavaScript

document.getElementById('xyz').style.display ='none';  // to display
0
susan097