3

我读过类似的帖子，但我只发现它说在 HTML 中添加类来做我想做的事，所以，基本上我有一个按钮，当我想点击它时隐藏所有代码 HTML 标签，当我点击它再次向他们展示。由于我在一个页面中有很多代码标签，因此为每个标签添加一个类将花费我很多时间。我一直在尝试一些事情，例如

if(document.getElementsByTagName("CODE").style.display === "block"){
document.getElementsByTagName("CODE").style.display = "none"
}

和周围的东西，所有类似的代码，但它们要么让我的浏览器崩溃，要么不起作用。我的问题是，真的必须使用类名并检查可以比较的类名吗，就像我在上面的代码中“做”的那样，所有标签的显示内容？（也许用for循环循环每个元素，我也试过了，但没有结果。）到目前为止，我用我很少的知识尝试了所有可能的事情（我还在学习javascript）。我真的很想知道我是否正在尝试做一些非常先进的事情，或者我只是不知道它是如何完成的。

谢谢，我希望没有另一个这样的问题，我已经阅读了所有建议的问题，但没有一个（除了它说要使用类）是这样的。

他们都建议添加课程，所以我觉得我正在尝试做一些真正不可能的事情。我还没有进入jQuery，所以请不要谈论它，谢谢。（首先我必须学习好的 JavaScript）

4

3 回答 3

3

您必须遍历 的结果document.getElementsByTagName("CODE")，它是一个类似数组的变量。这是一个 jQuery 功能，可让您写入.css()对象列表并处理它们。你需要类似的东西

ar = document.getElementsByTagName("code");
for (i = 0; i < ar.length; ++i)
   ar[i].style.display = "none";

如果您需要切换code可见性，请使用此代码

ar = document.getElementsByTagName("code"); 
for (i = 0; i < ar.length; ++i)
{ 
   if(ar[i].style.display != "none") //the element is visible
   {
      ar[i].style.display = "none";
   } 
   else
   {
      ar[i].style.display = "block"; //If you need to make it block explicitly, otherwise ""
   } 
}

请注意，该style.display属性最初为空，默认为inlineforcode标签，但可以显式设置为其他值。将其重置为会''导致恢复状态。

如果需要在不修改显示模式的情况下来回更改可见性，则需要保存之前的模式（code标签不仅可以在block模式下显示）。可以这样做：

ar = document.getElementsByTagName("code"); 
for (i = 0; i < ar.length; ++i)
{ 
   if(ar[i].style.display != "none") //the element is visible, "" or "blocK" or some other value
   {
      ar[i].saved_display = ar[i].style.display; //Save the display mode to a new property of the tag
      ar[i].style.display = "none"; //And hide the element
   } 
   else
   {
      if (typeof ar[i].saved_display === "undefined") //It's the first time we see the element. Display it in default mode
         ar[i].style.display = "";
      else
         ar[i].style.display = ar[i].saved_display; //We know how the element was shown before we hid it, restoring
   } 
}
于 2013-06-02T22:07:13.597 回答
1

正如 Aneri 所说，getElementsByTagName返回一个NodeList，您可以按索引对其进行迭代。

请注意，display属性只有在显式设置时才具有值，它不会从 CSS 继承值，因此您应该执行以下操作，如果未将所有 CODE 元素的显示设置为none和如果有，则显示它们：

var element, elements = document.getElementsByTagName("CODE");

for (var i=0, iLen=elements.length; i<iLen; i++) {
  element = elements[i];

  // If element hasn't been hidden, hide it
  if (element.style.display == '') {
    element.style.display = 'none';

  // Otherwise show it
  } else {
    element.style.display = '';
  }
}

请注意，您应该将显示值返回到“”（空字符串），以便元素返回到它们的默认值或继承值，这可能不是“块”。

此外，如果子元素的父元素具有display: none，则子元素将被隐藏。

于 2013-06-02T22:21:33.500 回答
0

您可以将一个类添加到BODY或HTML元素，并通过上下文选择器将所需的样式附加到该类。例如：

HTML.hide-code CODE {display: none; }
于 2013-06-02T22:36:08.150 回答