小编典典

使用JavaScript显示/隐藏'div'

javascript

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

这是我当前的代码

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的第二个功能不起作用,但第一个功能起作用。


阅读 627

收藏
2020-04-25

共1个答案

小编典典

如何显示或隐藏元素:

为了显示或隐藏元素,请操纵元素的style属性。在大多数情况下,您可能只想更改元素的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

隐藏元素的集合:

如果要隐藏元素的集合,只需遍历每个元素并将元素的更改displaynone

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,这意味着在显示元素集合时,以下内容可能就足够了。

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 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属性的计算值来确定它是否可见。如果可见,则将其设置displaynone,否则将删除内联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>
2020-04-25