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

我很想拥有一个不依赖于JQuery或任何超过标准JS和CSS的HTML文档我可以简单地隐藏或取消隐藏特定的一组HTML标记。我想通过创建一个'hidden'和'unhidden'类，然后将它们分配给我想要隐藏或显示的标签，例如说我想显示所有h1和h2标题，但隐藏所有h3标题（同时保留文本与文档的前面和后面的文本在同一行上）。我可以将JS类应用于纯CSS和JS中的给定类型的所有HTML元素（不包含任何jQuery）

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标签仍显示在其内文。 :(任何想法

来源

2017-05-13 Freementalist

要动态添加或删除类名，必须使用JavaScript，在服务器端动态分配它，然后必须使用服务器端语言。但这超出了CSS的范围。 –

这看起来不像有效的JS。查看'query'函数以使用CSS语法选择元素。 – Carcigenicate

分配ID到你的H3，然后在脚本中使用它：

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

您也可以使用getElementsByClassName方法或的getElementsByTagName;

来源

2017-05-13 23:56:45

听起来不错，所以我可以这样做：document.getElementsByTagName（“h1”）。style.display =“none”;谢谢，我现在就试试 – Freementalist

隐藏所有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>

来源

2017-05-14 00:09:53

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

回答

相关问题