html隐藏文本利用原理，实现点击隐藏功能
先举一个原理：
html代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.hidden {display: none;}</style>
</head>
<body>
<div id="box">这是一个盒子</div>
<div id="box2" class="hidden">这是隐藏的盒子</div></body>
</html>运行效果：
document.getElementById('overlay').classList.toggle('none');在这段代码中的
toggle是判断是否有样式进而自动实现添加或删掉样式。
实现单个样式隐藏文本
代码如下：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>pointer-events 示例</title><style>.none {display: none;}</style></head>
<body><div id="overlay">这是一个遮罩层</div>
<button onclick="toggle()">显示/隐藏</button><script>function toggle() {document.getElementById('overlay').classList.toggle('none');}
</script></body>
</html>
效果如下：
实现文字隐藏或显示。
接下来展示一键隐藏多个样式的源码:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>隐藏多个元素示例</title><style>/* 普通样式 */.box {width: 150px;height: 100px;line-height: 100px;margin: 10px;text-align: center;color: white;display: inline-block;}.red { background-color: crimson; }.green { background-color: seagreen; }.blue { background-color: steelblue; }/* 隐藏通用类 */.hide {display: none;}</style>
</head>
<body><h2>点击按钮隐藏所有彩色方块</h2><!-- 三个不同类的元素 -->
<div class="box red group">红色</div>
<div class="box green group">绿色</div>
<div class="box blue group">蓝色</div><br><br><!-- 按钮 -->
<button onclick="hideAll()">一键隐藏</button>
<button onclick="showAll()">恢复显示</button><script>function hideAll() {document.querySelectorAll('.group').forEach(el => {el.classList.add('hide');});}function showAll() {document.querySelectorAll('.group').forEach(el => {el.classList.remove('hide');});}
</script></body>
</html>
效果图如下：
可显示或隐藏。