文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用JavaScript显示/隐藏'div‘

问使用JavaScript显示/隐藏'div‘
EN

Stack Overflow用户
提问于 2014-01-12 09:12:05
回答 15查看 1.3M关注 0票数 220

对于我正在做的一个网站，我想加载一个div，然后隐藏另一个，然后有两个按钮，可以使用JavaScript在div之间切换视图。

这是我当前的代码

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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的第二个函数不起作用，但第一个函数起作用了。

javascript
html
onclick
innerhtml
EN

回答 15

Stack Overflow用户

回答已采纳

发布于 2014-01-12 09:33:42

如何显示或隐藏元素：

为了显示或隐藏元素，操作元素的style property。在大多数情况下，您可能只想更改元素的display property

代码语言：javascript
复制
element.style.display = 'none';           // Hide
element.style.display = 'block';          // Show
element.style.display = 'inline';         // Show
element.style.display = 'inline-block';   // Show

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

代码语言：javascript
复制
element.style.visibility = 'hidden';      // Hide
element.style.visibility = 'visible';     // Show

隐藏元素集合：

如果要隐藏元素集合，只需迭代每个元素并将元素的display更改为none

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

​

代码语言：javascript
复制
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';
  }
}
代码语言：javascript
复制
<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，可以选择将所需的display指定为第二个参数。

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

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

​

代码语言：javascript
复制
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';
  }
}
代码语言：javascript
复制
<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样式，以便将其恢复到初始状态。然后检查元素的computed display样式，以确定它是否被级联规则隐藏。如果是，则显示该元素。

代码语言：javascript
复制
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';
    }
  }
}

​

代码语言：javascript
复制
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';
    }
  }
}
代码语言：javascript
复制
<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。

代码语言：javascript
复制
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';
  }
}
代码语言：javascript
复制
// Usage:
document.getElementById('toggle-button').addEventListener('click', function () {
  toggle(document.querySelectorAll('.target'));
});

​

代码语言：javascript
复制
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';
  }
}
代码语言：javascript
复制
.target { display: none; }
代码语言：javascript
复制
<button id="toggle-button">Toggle display</button>

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

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

​

票数 486
EN

Stack Overflow用户

发布于 2015-01-06 19:09:30

您还可以使用jQuery JavaScript框架：

隐藏分割块的步骤

代码语言：javascript
复制
$(".divIDClass").hide();

显示分割块的步骤

代码语言：javascript
复制
$(".divIDClass").show();
票数 106
EN

Stack Overflow用户

发布于 2014-01-12 09:20:48

您可以简单地操作有问题的div的样式...

代码语言：javascript
复制
document.getElementById('target').style.display = 'none';
票数 47
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/21070101

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档