如何使用javascript同时显示/隐藏多个元素

Question

所以，我的头部标签之间有这个

<script type="text/javascript">
hidden_links = document.getElementsByName("javascript_needed");
    for (i = 0; i < hidden_links.length; i++) {
        hidden_links[i].style.display = "visible";
    }
</script>

而且我的div都类似于

    <div name="javascript_needed" style="display: none;">stuff</div>

此处的总体目标是在禁用javascript时隐藏这些div，并在启用javascript时重新启用它们。...但是由于某种原因，我的代码无法正常工作。 我曾经在webkit控制台中尝试过，没有任何错误= \\

Answer 1

在div进入DOM之前执行JavaScript。 在DOM准备就绪后执行操作的标准方法是使用jQuery的$(document).ready(function () { }); ，但还有其他方法。

过去的方法是使用<body onload="myfunction()"> 。

这是更新的方法（ 编辑：将display:none放入CSS）：

HTML：

<p class='javascript_needed'>hello</p>

CSS：

.javascript_needed {display:none;}

JavaScript的：

$(document).ready(function () {
    $('.javascript_needed').show();
});

Answer 2

您的JS应该将div的显示设置为“阻止”（“可见”不是用于显示的有效值）。

同样，从外观上看，在代码被激发时，您的元素不在DOM中（您的代码尚未看到它们）。 请执行以下任一操作：

将代码放在div下方的文档正文中的任何位置

或者，使用不引人注目的策略在窗口加载时触发函数，例如：

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);

或者，使用JS框架的“就绪”功能（如jQuery） ：

$(function () {
    nameOfSomeFunctionToRunOnPageLoad();
});

Answer 3

“可见”不是“显示”的有效值。 您在“内联”或“阻止”之后。

“ visible”和“ hidden”是“ visibility” CSS属性的有效值。

Answer 4

display与visible之间的区别：

visible的元素仍会占用页面空间。 当元素在visible和hidden之间切换时，相邻内容不会重新排列。
display=none的元素不会占用页面上的任何空间。 其他display值将导致元素占用空间。 例如， display=block不仅显示元素，而且在元素之前和之后添加换行符。

Answer 5

将元素显示为就绪的缺点是它们只会在页面加载完成后闪烁。 这通常看起来很奇怪。

这是我通常要做的。 在文档<head>中的脚本中（该脚本在正文开始呈现之前运行），请执行以下操作：

document.documentElement.className = "JS";

然后，仅当启用JavaScript后，任何.JS CSS选择器才会匹配。 假设您为链接提供了javascriptNeeded类（这里的javascriptNeeded名称更合适）。 将此添加到您的CSS：

.javascriptNeeded{
 display: none;
}
.JS .javascriptNeeded{

 display: inline;
}

…并且元素从一开始就存在，但仅在启用JavaScript的情况下。

如何使用javascript同时显示/隐藏多个元素

问题描述

5 个解决方案

解决方案1
4 已采纳 2010-06-11 14:51:32

解决方案2
1 2010-06-11 15:00:02

解决方案3
0 2010-06-11 14:53:06

解决方案4
0 2010-06-11 15:01:47

解决方案5
0 2010-06-11 15:13:44

如何使用javascript同时显示/隐藏多个元素

问题描述

5 个解决方案

解决方案1 4 已采纳 2010-06-11 14:51:32

解决方案2 1 2010-06-11 15:00:02

解决方案3 0 2010-06-11 14:53:06

解决方案4 0 2010-06-11 15:01:47

解决方案5 0 2010-06-11 15:13:44

解决方案1
4 已采纳 2010-06-11 14:51:32

解决方案2
1 2010-06-11 15:00:02

解决方案3
0 2010-06-11 14:53:06

解决方案4
0 2010-06-11 15:01:47

解决方案5
0 2010-06-11 15:13:44