IT技术 - 使用 JavaScript 显示/隐藏“div” - 吾爱随笔录

使用 JavaScript 显示/隐藏“div”

IT技术 javascript html onclick innerhtml

2021-01-21 15:00:54

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

6个回答

如何显示或隐藏元素：

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

隐藏元素集合：

如果要隐藏元素集合，只需遍历每个元素并将元素更改display为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'));

Show code snippet

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

Show code snippet

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

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属性的计算值来确定它是否可见。如果可见，则将设置display为none，否则删除内联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'));
});

Show code snippet

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>

埃雷斯拉皮奥拉格拉西亚斯

2021-03-30 15:00:54

您还可以使用jQuery JavaScript 框架：

隐藏 Div 块

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

显示 Div 块

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

我认为这个答案非常有用，并且与问题有关。

2021-03-15 15:00:54

这不是投反对票的原因。这个问题并没有具体说不要使用jquery，而且其他人来这里查看答案可能没有与OP相同的限制。

2021-03-17 15:00:54

问题没有提到使用 jQuery

2021-04-03 15:00:54

@KinjalDixit 如果 IMRUP 想要添加一个注释，说明他的答案不使用 vanilla JS 而是依赖于 jQuery，那么它会有一些优点，即使原始问题没有标记为 jQuery/甚至提到 jQuery。就目前而言，它是使用库的答案，但没有提及它这样做，很少（尽管可能是所有必要的）解释，并且混淆了选择器的使用（在说明ID 的同时使用类选择器？）。就目前而言，我认为这不是对这个问题有用的答案。

2021-04-06 15:00:54

添加 jQuery 示例（恕我直言，这是完全有效的方法）时，还请提供一个 vanilla JS 示例进行比较并向 OP 解释差异。现在很多新开发人员认为 jQuery就是JavaScript。一点教育将帮助他们做出正确的选择。

2021-04-09 15:00:54

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

document.getElementById('target').style.display = 'none';

但我希望它也显示第二个 div 的内容

2021-03-12 15:00:54

您可以使用 Js 功能隐藏/显示 Div。下面的示例

<script>
    function showDivAttid(){

        if(Your Condition) {

            document.getElementById("attid").style.display = 'inline';
        }
        else
        {
            document.getElementById("attid").style.display = 'none';
        }
    }

</script>

HTML -

<div  id="attid" style="display:none;">Show/Hide this text</div>

如果您想使用类名而不是 Id，请使用类似document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

2021-03-27 15:00:54

使用风格：

<style type="text/css">
   .hidden {
        display: none;
   {
   .visible {
        display: block;
   }
</style>

在 JavaScript 中使用事件处理程序比onclick=""在 HTML 中使用属性更好：

<button id="RenderPortfolio_Btn">View Portfolio</button>
<button id="RenderResults_Btn">View Results</button>

<div class="visible" id="portfolio">
    <span>div1</span>
</div>

<div class"hidden" id="results">
    <span>div2</span>
</div>

JavaScript：

<script type="text/javascript">

    var portfolioDiv = document.getElementById('portfolio');
    var resultsDiv = document.getElementById('results');

    var portfolioBtn = document.getElementById('RenderPortfolio_Btn');
    var resultsBtn = document.getElementById('RenderResults_Btn');

    portfolioBtn.onclick = function() {
        resultsDiv.setAttribute('class', 'hidden');
        portfolioDiv.setAttribute('class', 'visible');
    };

    resultsBtn.onclick = function() {
        portfolioDiv.setAttribute('class', 'hidden');
        resultsDiv.setAttribute('class', 'visible');
    };

</script>

jQuery可以帮助您轻松操作 DOM 元素！

你可以试试HTML5的hidden属性

2021-03-18 15:00:54

其它你可能感兴趣的问题

上一篇我如何Promise原生 XHR？下一篇为什么 .json() 返回一个Promise？