使用 JavaScript 显示/隐藏 'div'

javascript html onclick innerhtml

2022-08-30 00:51:35

对于我正在做的网站，我想加载一个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 的第二个函数不起作用，但第一个函数不起作用。

答案 1

如何显示或隐藏元素：

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

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

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

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: nonedisplay: block

如果不希望将所需的参数指定为第二个参数，则可以选择将其指定为。displayblock

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

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

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的作用，通过将元素附加到空白（没有冲突的样式表）来确定元素的默认浏览器样式，然后检索计算的样式。这样，您将知道元素的真正初始属性值，并且不必为了获得所需的结果而对值进行硬编码。iframedisplay

切换显示屏：

同样，如果要切换元素或元素集合的，则只需循环访问每个元素，并通过检查属性的计算值来确定它是否可见。如果可见，请将设置为，否则删除内联样式，如果它仍然隐藏，则将设置为指定的值或硬编码的默认值。displaydisplaydisplaynonedisplaydisplayblock

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>

答案 2

你也可以使用jQuery JavaScript框架：

隐藏 div 块

$(".divIDClass").hide();

显示 Div 块

$(".divIDClass").show();