Question

我希望有一个不依赖于JQuery或任何超出标准JS和CSS的HTML文档，我可以简单地隐藏或取消隐藏一组特定的HTML标记。我想通过创建一个“隐藏”类和一个“未隐藏”类，然后将它们分配给我想隐藏或显示的标签，例如说我想显示所有h1和h2标题，但隐藏所有h3标题（同时保持文本与文档的前一个和下一个文本在同一行）。

    h1 { className: unhidden; }
    h2 { className: unhidden; }
    h3 { className: hidden; }

    .hidden { display: none; }
    .hidden { visibility: hidden; }
    .unhidden { display: inline; }
    .unhidden { visibility: visible; }

我已经整理了一整个文档来模拟这个，但是无法让它工作，我希望我错过了一些简单的东西：

<html>
    <head>
        <script>
            h1 { className: unhidden; }
            h2 { className: unhidden; }
            h3 { className: hidden; }
            .hidden { display: none; }
            .hidden { visibility: hidden; }
            .unhidden { display: inline; }
            .unhidden { visibility: visible; }
        </script>
    </head>
    <body>
        <h1>Some unhidden text</h1> <h2>More unhidden text</h2> <h3>this text is **hidden**</h3>
    </body>
</html>

h3标签仍会显示其中的文字。 :(任何想法？

Answer 1

为您的h3分配ID，然后在脚本中使用它：

＆＃13;

document.getElementById("myId").style.display = "none";

＆＃13;

您还可以使用getElementsByClassName或getElementsByTagName;

Answer 2

例如，隐藏所有h3：

[].slice.call(document.querySelectorAll('h3')).forEach(function(el) {
  el.className = 'hidden';
});

.hidden { display: none; }
.hidden { visibility: hidden; }
.unhidden { display: inline; }
.unhidden { visibility: visible; }

<h1>Some unhidden text</h1> <h2>More unhidden text</h2> <h3>this text is **hidden**</h3>

我可以在纯CSS和JS（没有任何jQuery）中将JS类应用于给定类型的所有HTML元素

2 个答案: