使用JavaScript显示/隐藏'div' [英] Show/hide 'div' using JavaScript

查看：76
本文介绍了使用JavaScript显示/隐藏'div'的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



这是我当前的代码 

 < script type =text / javascript> 
函数replaceContentInContainer（target，source）{
 document.getElementById（target）.innerHTML = document.getElementById（source）.innerHTML; 
} 
函数replaceContentInOtherContainer（replace_target，source）{
 document.getElementById（replace_target）.innerHTML = document.getElementById（source）.innerHTML; 
} 
< / script>

当前HTML： 

 < html> 
< button onClick =replaceContentInContainer（'target'，'replace_target'）>查看投资组合< / button> 
< button onClick =replaceContentInOtherContainer（'replace_target'，'target'）>查看结果< / button> 
 
< div> 
< span id =target> div1< / span> 
< / div> 
 
< div style =display：none> 
< span id =replace_target> div2< / span> 
< / div>

替换div2的第二个函数不起作用，但第一个函数是。

解决方案

如何显示或隐藏元素：



为了显示或隐藏元素，请操作元素的样式属性。在大多数情况下，您可能只想更改元素的 display 属性：

  element.style.display ='none'; //隐藏
 element.style.display ='block'; //显示
 element.style.display ='inline'; //显示
 element.style.display ='inline-block'; //显示

另外，如果你仍然希望元素占据空间（就像你要隐藏表格单元格），您可以更改元素的 可见性 property 代替： 

  element.style.visibility ='hidden'; //隐藏
 element.style.visibility ='visible'; //显示



隐藏一组元素：



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

  function hide（elements）{
 elements = elements.length？元素：[元素]; （var index = 0; index< elements.length; index ++）{
 elements [index] .style.display ='none'; 
; 
 
 
  





  //用法：
 hide（document.querySelectorAll（'。target'））; 
 hide（document.querySelector（'。target'））; 
 hide（document.getElementById（'target'））;

hide（document.querySelectorAll（'。target' ））; function hide（elements）{elements = elements.length？元素：[元素]; for（var index = 0; index< elements.length; index ++）{elements [index] .style.display ='none'; }} 

 < div class =target> < / div>< span class =target>此跨度也会隐藏。< / span>


显示元素集合：

大多数情况下，只是在 display：none 和 display：block 之间切换，这意味着以下可能

您可以选择指定所需的 display 作为第二个参数if你不希望它默认为 block 。

  function show （elements，specifiedDisplay）{
 elements = elements.length？元素：[元素]; 
 for（var index = 0; index< elements.length; index ++）{
 elements [index] .style.display = specifiedDisplay || '块'; 
 
 
  





  //用法：
 var elements = document.querySelectorAll（'。target'）; 
 show（elements）; 
 
 show（elements，'inline-block'）; //第二个参数允许你指定一个显示值

var elements = document.querySelectorAll（'。target'）; show（elements，'inline-block'）; //第二个参数允许你指定显示的值（document.getElementById（'hidden-input'））; function show（elements，specifiedDisplay）{elements = elements.length？元素：[元素]; for（var index = 0; index< elements.length; index ++）{elements [index] .style.display = specifiedDisplay || '块'; }} 

 < div class =targetstyle = < / div>< span>内嵌范围..< / span>< input id =隐藏的"隐藏的div应该在显示时显示inline-block。 -input/>



元素将只是删除内联显示样式，以便将其恢复到其初始状态。然后检查元素的计算显示样式以确定它是否被级联规则隐藏。 

  function show（elements，specifiedDisplay）{
 var computedDisplay，element，index ; 
 
 elements = elements.length？元素：[元素]; 
 for（index = 0; index< elements.length; index ++）{
 element = elements [index]; 
 
 //删除元素的内嵌显示样式
 element.style.display =''; 
 computedDisplay = window.getComputedStyle（element，null）.getPropertyValue（'display'）; 
 
 if（computedDisplay ==='none'）{
 element.style.display = specifiedDisplay || '块'; 
 
 
 
  

  show（document.querySelectorAll（'。target'））; function show（elements，specifiedDisplay）{var computedDisplay，element，index; elements = elements.length？元素：[元素]; for（index = 0; index< elements.length; index ++）{element = elements [index]; //删除元素的内联显示样式element.style.display =''; computedDisplay = window.getComputedStyle（element，null）.getPropertyValue（'display'）; if（computedDisplay ==='none'）{element.style.display = specifiedDisplay || '块'; }}}

< span class =targetstyle < / span>< / div> =display：none>应该恢复为内嵌。< / span>< span class =targetstyle =display：none> < / div>< span class =targetstyle =display：none>应该恢复为内联。 < / span>



更进一步，您甚至可以模仿jQuery所做的事情，并通过将元素附加到空白 iframe （没有冲突的样式表）来确定元素的默认浏览器样式，然后检索计算出的样式。这样做，你就会知道元素的真正的初始显示属性值，你不需要硬编码一个值就可以得到想要的结果。）



切换显示：



同样，如果您想要切换元素或元素集合的 display ，您可以遍历每个元素并通过检查计算出的值来确定它是否可见显示属性。如果可见，请将显示设置为 none ，否则请移除内联显示样式，如果它仍然隐藏，请将显示设置为指定值或硬编码默认值， block 

  function toggle（elements，specifiedDisplay）{
 var element，index; 
 
 elements = elements.length？元素：[元素]; 
 for（index = 0; index< elements.length; index ++）{
 element = elements [index]; 
 
 if（isElementHidden（element））{
 element.style.display =''; 
 
 //如果元素在删除嵌入式显示后仍然隐藏
 if（isElementHidden（element））{
 element.style.display = specifiedDisplay || '块'; 
} 
} else {
 element.style.display ='none'; 
 
 
 function isElementHidden（element）{
 return window.getComputedStyle（element，null）.getPropertyValue（'display'）==='none'; 
 
 
  





  //用法：
 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？元素：[元素]; for（index = 0; index< elements.length; index ++）{element = elements [index]; if（isElementHidden（element））{element.style.display =''; //如果元素在删除内联显示后仍然隐藏if（isElementHidden（element））{element.style.display = specifiedDisplay || '块'; }} else {element.style.display ='none'; }} function isElementHidden（element）{return window.getComputedStyle（element，null）.getPropertyValue（'display'）==='none'; }}

.target {display：none; }

< button id =toggle-button> ;切换显示< / button>< span class =target>切换span。< / span>< div class =target>切换div。< / div>


For a website I'm doing, I want to load one div, and hide another, then have two buttons that will toggle views between the div using JavaScript.

This is my current code

<script type="text/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;
    }
</script>

Current HTML:

<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>

The second function that replaces div2 is not working, but the first one is.

解决方案

How to show or hide an element:

In order to show or hide an element, manipulate the element's style property. In most cases, you probably just want to change the element's display property:

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

Alternatively, if you would still like the element to occupy space (like if you were to hide a table cell), you could change the element's visibility property instead:

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

Hiding a collection of elements:

If you want to hide a collection of elements, just iterate over each element and change the element's display to 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>

Showing a collection of elements:

Most of the time, you will probably just be toggling between display: none and display: block, which means that the following may be sufficient when showing a collection of elements.

You can optionally specify the desired display as the second argument if you don't want it to default to 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" />

Alternatively, a better approach for showing the element(s) would be to merely remove the inline display styling in order to revert it back to its initial state. Then check the computed display style of the element in order to determine whether it is being hidden by a cascaded rule. If so, then show the element.

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>

(If you want to take it a step further, you could even mimic what jQuery does and determine the element's default browser styling by appending the element to a blank iframe (without a conflicting stylesheet) and then retrieve the computed styling. In doing so, you will know the true initial display property value of the element and you won't have to hardcode a value in order to get the desired results.)

Toggling the display:

Similarly, if you would like to toggle the display of an element or collection of elements, you could simply iterate over each element and determine whether it is visible by checking the computed value of the display property. If it's visible, set the display to none, otherwise remove the inline display styling, and if it's still hidden, set the display to the specified value or the hardcoded default, 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>

这篇关于使用JavaScript显示/隐藏'div'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆