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

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

问题描述

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

这是我当前的代码

function replaceContentInContainer(target, source) {document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;}函数 replaceContentInOtherContainer(replace_target, source) {document.getElementById(replace_target).innerHTML = document.getElementById(source).innerHTML;}

<button onClick="replaceContentInContainer('target', 'replace_target')">查看作品集</button><button onClick="replaceContentInOtherContainer('replace_target', 'target')">查看结果</button><div><span id="target">div1</span>

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

替换 div2 的第二个函数不起作用,但第一个函数起作用.

解决方案

如何显示或隐藏元素:

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

element.style.display = 'none';//隐藏element.style.display = 'block';//展示element.style.display = '内联';//展示element.style.display = 'inline-block';//展示

或者,如果您仍然希望元素占据空间(例如,如果您要隐藏表格单元格),您可以更改元素的 visibility 属性:

element.style.visibility = '隐藏';//隐藏element.style.visibility = '可见';//展示

隐藏元素集合:

如果你想隐藏一组元素,只需遍历每个元素并将元素的display更改为none:

函数隐藏(元素){元素 = 元素长度?元素:[元素];for (var index = 0; index < elements.length; index++) {元素[索引].style.display = '无';}}

//用法:隐藏(document.querySelectorAll('.target'));隐藏(document.querySelector('.target'));隐藏(document.getElementById('目标'));

hide(document.querySelectorAll('.target'));函数隐藏(元素){元素 = 元素长度?元素:[元素];for (var index = 0; index < elements.length; index++) {元素[索引].style.display = '无';}}

<div class="target">这个 div 将被隐藏.</div><span class="target">这个范围也将被隐藏.</span>

显示元素集合:

大多数时候,您可能只是在 display: nonedisplay: block 之间切换,这意味着以下 可能显示元素集合时就足够了.

如果您不希望它默认为 block,您可以选择将所需的 display 指定为第二个参数.

function show (elements, specifiedDisplay) {元素 = 元素长度?元素:[元素];for (var index = 0; index < elements.length; index++) {元素[索引].style.display = specifiedDisplay ||'堵塞';}}

//用法:var elements = document.querySelectorAll('.target');显示(元素);显示(元素,'内联块');//第二个参数允许你指定一个显示值

var elements = document.querySelectorAll('.target');显示(元素,'内联块');//第二个参数允许你指定一个显示值显示(document.getElementById('隐藏输入'));功能显示(元素,指定显示){元素 = 元素长度?元素:[元素];for (var index = 0; index < elements.length; index++) {元素[索引].style.display = specifiedDisplay ||'堵塞';}}

<div class="target" style="display: none">这个隐藏的div应该有'inline-block的显示' 显示时.</div><span>内联跨度..</span><input id="hidden-input"/>

或者,显示元素的更好方法是仅删除内联 display 样式,以便将其恢复到其初始状态.然后检查计算出的元素的 display 样式,以确定它是否被级联规则隐藏.如果是,则显示该元素.

function show (elements, specifiedDisplay) {var 计算显示、元素、索引;元素 = 元素长度?元素:[元素];for (index = 0; index 

show(document.querySelectorAll('.target'));功能显示(元素,指定显示){var 计算显示、元素、索引;元素 = 元素长度?元素:[元素];for (index = 0; index 

<span class="target" style="display: none">应该恢复为内联.</span><span class="target" style="display: none">内联也是如此.</span><div class="target" style="display: none">应该恢复到块级.</div><span class="target" style="display: none">应该恢复为内联.</span>

(如果你想更进一步,你甚至可以模仿 jQuery 的作用,并通过将元素附加到一个空白的 iframe(没有冲突的样式表)来确定元素的默认浏览器样式,并且然后检索计算出的样式.这样做时,您将知道元素的真正初始 display 属性值,并且您不必对值进行硬编码以获得所需的结果.)

切换显示:

同样,如果你想切换一个元素或元素集合的显示,你可以简单地遍历每个元素并通过检查display 属性.如果可见,将 display 设置为 none,否则删除内联 display 样式,如果它仍然隐藏,则设置 display 到指定的值或硬编码的默认值,block.

功能切换(元素,指定显示){var 元素,索引;元素 = 元素长度?元素:[元素];for (index = 0; index 

//用法:document.getElementById('toggle-button').addEventListener('click', function () {切换(document.querySelectorAll('.target'));});

document.getElementById('toggle-button').addEventListener('click', function () {切换(document.querySelectorAll('.target'));});功能切换(元素,指定显示){var 元素,索引;元素 = 元素长度?元素:[元素];for (index = 0; index 

.target { display: none;}

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

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>

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天全站免登陆