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

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

javascript html css tags

Javascript 我可以在纯CSS和JS（不带任何jQuery）中将JS类应用于给定类型的所有HTML元素吗,javascript,html,css,tags,Javascript,Html,Css,Tags,我希望有一个HTML文档，它不依赖于JQuery或任何超出标准JS和CSS的东西，我可以简单地隐藏或取消隐藏一组特定的HTML标记。我想通过创建一个“隐藏”类和一个“未隐藏”类，然后将它们分配给我要隐藏或显示的标记，例如，假设我想显示所有h1和h2标题，但隐藏所有h3标题（同时将文本保持在与文档前面和后面文本相同的行上）我已经准备了一份完整的文件来模拟这一点，但无法让它发挥作用，我希望我遗漏了一些简单的东西： <html> <head> <

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

我已经准备了一份完整的文件来模拟这一点，但无法让它发挥作用，我希望我遗漏了一些简单的东西：

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


h1{className:unhidden；}
h2{className:unhidden；}
h3{className:hidden；}
.hidden{显示：无；}
.hidden{可见性：hidden；}
.unhidden{display:inline；}
.unhidden{可见性：可见；}
一些未隐藏文本更多未隐藏文本此文本**隐藏**

h3标记仍然显示其中的文本：（有什么想法吗？

将ID分配给h3，然后在脚本中使用它：

document.getElementById（“myId”）.style.display=“none”

隐藏所有h3，例如：

[].slice.call（document.queryselectoral（'h3'））.forEach（函数（el）{
el.className='hidden'；
})；

.hidden{display:none；}
.hidden{可见性：hidden；}
.unhidden{display:inline；}
.unhidden{可见性：可见；}

一些未隐藏的文本更多未隐藏的文本此文本是**隐藏**

要动态添加或删除类名，必须使用JavaScript，在服务器端动态分配类名，然后必须使用服务器端语言。但这超出了CSS的范围。这看起来不像有效的JS。请查找要选择的

查询

函数ect元素使用CSS语法。听起来不错，所以我可以做一些类似的事情：document.getElementsByTagName（“h1”）.style.display=“none”；我现在就试试，谢谢

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