javascript display:对于指定段落中的每个<span>组件均为无
javascript display:对于指定段落中的每个<span>组件均为无
提问于 2021-11-16 14:25:49
我有一个显示超过10,000行文本的段落，我想要在不隐藏它们所在的段落的情况下将它们全部从显示中删除(例如，通过将跨度style="display:block“更改为”display:none“来单独删除每行文本)。我在中还有其他我不想隐藏的元素，只有跨度。
我可以逐行处理它们，但对于涉及的行数来说，这是不可行的。有没有更快的方法来做这件事？
function uncheckAll() {
document.getElementById("Box1").style.display = "none";
document.getElementById("Box2").style.display = "none";
document.getElementById("Box3").style.display = "none";
document.getElementById("Box4").style.display = "none";
document.getElementById("Box5").style.display = "none";
}<body>
<p id="main" style="display:block" contenteditable="true">
<span id="Box1" style="display:block">text 1.</span>
<span id="Box2" style="display:block">text 2.</span>
<span id="Box3" style="display:block">text 3.</span>
<span id="Box4" style="display:block">text 4.</span>
<span id="Box5" style="display:block">etc.....</span>
</p>
<button style="height:50%;width:10%" onClick="uncheckAll()">Clear</button>
</body>
回答 2
Stack Overflow用户
发布于 2021-11-16 14:29:19
你可以试试这个
const uncheckAll = () => {
var elements = document.querySelectorAll('#main span');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = "none";
}
};#main span {
display: block;
}<p id="main" style="display:block" contenteditable="true">
<span id="Box1">text 1.</span>
<span id="Box2">text 2.</span>
<span id="Box3">text 3.</span>
<span id="Box4">text 4.</span>
<span id="Box5">etc.....</span>
</p>
<button style="height:50%;width:10%" onClick="uncheckAll()">Clear</button>
Stack Overflow用户
发布于 2021-11-16 15:18:12
它更简单
const uncheckAll = _ => {
document.getElementById('#main').classList.add('hide-all');
};.hide-all > span { display:none; }
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69990912
复制相关文章
相似问题
腾讯云开发者
