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

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

oldschool方式是使用<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的显示设置为“block”（“visible”不是显示的有效值。）

此外，从代码被触发时你的元素不在DOM中的东西（你的代码还没有看到它们）。请执行以下任何操作：

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

或使用不显眼的策略在窗口加载时触发您的功能，la：

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框架的“就绪”功能，一个la jQuery的：

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

Answer 3

“visible”不是“display”的有效值。你是在“内联”或“阻止”之后。

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

Answer 4

display与visible之间的差异：

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

Answer 5

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

这是我通常做的事情。在文档<head>的脚本中（在正文开始渲染之前运行），执行以下操作：

document.documentElement.className = "JS";

然后，任何来自.JS的CSS选择器只会在启用JavaScript时匹配。假设您为链接提供了一个javascriptNeeded类（这里的类比名称更合适）。将其添加到您的CSS：

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

 display: inline;
}

...元素将从一开始就存在，但仅在启用JavaScript时才会出现。

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

5 个答案: