使用JavaScript显示隐藏'div'

使用JavaScript显示/隐藏'div' 如何显示或隐藏元素：

为了显示或隐藏元素，请 *** 纵元素的style属性。在大多数情况下，您可能只想更改元素的

display

属性：

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

或者，如果您仍然希望元素占用空间（例如，如果您要隐藏表格单元格），则可以改为更改元素的

visibility

属性：

element.style.visibility = 'hidden';      // Hideelement.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 >This div will be hidden.</div><span >This span will be hidden as well.</span>

显示元素的集合：

在大多数情况下，您可能只会在

display:none

和之间切换

display:block

，这意味着在显示元素集合时，以下内容可能就足够了。

display

如果您不希望将默认值指定为，则可以选择将所需的值指定为第二个参数

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 valuevar elements = document.querySelectorAll('.target');show(elements, 'inline-block'); // The second param allows you to specify a display valueshow(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  >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  >Should revert back to being inline.</span><span  >Inline as well.</span><div  >Should revert back to being block level.</div><span  >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 >Toggle the span.</span><div >Toggle the div.</div>