Javascript 我可以独立于父元素隐藏页面中的所有文本吗？

我想知道如何使用JS或CSS隐藏/显示网页中的文本，而不隐藏包含的元素

我看了又看，找不到任何关于如何做到这一点的信息可能吗？

显然，我可以在所有文本中添加跨距。我正在寻找一个快捷方式，包括文本节点或CSS解决方案

---

编辑：如果没有，那么为相同的效果做一个简单的变通怎么样？我注意到我可以使用RGBA不透明度0来实现效果，而无需添加容器元素。唯一的问题是，它也影响边界

font-color:color

在这里将是一个非常有用的CSS功能…

以下是一种从文档中删除所有文本节点的方法，但要精确跟踪它们的位置，以便您可以将它们全部放回：

工作演示：

//无递归遍历DOM的函数（更快）
//并为每个节点调用回调
var treeWalkFast=（函数（）{
//为常量创建闭包
var skipTags={“SCRIPT”：true，“IFRAME”：true，“OBJECT”：true，
“嵌入”：真，“样式”：真，“链接”：真，“元”：真}；
返回函数（父、fn、所有节点）{
var node=parent.firstChild，nextNode；
while（节点和节点！=父节点）{
if（所有节点| | node.nodeType==1）{
if（fn（节点）==false）{
返回（假）；
}
}
//如果它是一个元素&&
//有孩子&&
//有标记名&&不在skipTags列表中
//然后，我们可以列举儿童
if（node.nodeType==1&&node.firstChild&！（node.tagName&&skipTags[node.tagName]））{
node=node.firstChild；
}else if（node.nextSibling）{
node=node.nextSibling；
}否则{
//没有孩子，也没有下一个孩子
//查找具有下一个sibling的父级
while（（node=node.parentNode）！=parent）{
if（node.nextSibling）{
node=node.nextSibling；
打破
}
}
}
}
}
})();
可见值=真值；
var textNodes=[]；
var textNodesNext=[]；
var textNodeParents=[]；
document.addEventListener（“单击”，函数（）{
如果（可见）{
//收集所有文本节点及其位置的列表
treeWalkFast（document.body，function（node））{
if（node.nodeType==3）{
textNodes.push（节点）；
text nodesnext.push（node.nextSibling）；
textNodeParents.push（node.parentNode）；
}
}，对）；
//现在从文档中删除所有文本节点
对于（var i=0；i

您可以使用一行CSS使文本不可见：

body.hidetext { font-size: 0px !important; } 

--然后只需切换hidetext类：

$('body').toggleClass('hidetext');

---

（请注意，CSS中更具体的

字体大小：！important

将覆盖该字体大小，因此它可能不是完美的解决方案。）

img未显示。发布html<代码>http://i.stack.imgur.com/MxNc7.pngpath for image您只能隐藏元素，而不能隐藏文本本身。因此，如果只想隐藏文本的一部分，则该部分必须位于其自己的元素中。您选择哪个元素无关紧要。@Dalorzo:对我来说很好。@Dalorzo重新上传了img，现在应该可以了。稍后查看此解决方案，我想知道：如果在删除节点和放回节点之间向页面添加动态内容，这会起作用吗？@jt0dd-如果在删除所有文本节点的同时添加动态内容，您认为会出现什么行为？它是否“有效”取决于您对行为的期望。我认为每个节点都会被索引，并以这种方式按顺序放回，因此我认为如果脚本认为文本节点需要放在位置3，可能会出现混淆，当一个新元素刚刚被放置在那个位置时，节点操作是我在此之前不需要的，所以我的理解有限。所以，我可能是100%错了。@jt0dd-这些节点相对于已经存在的其他节点（不是像3号这样的位置）被替换。如果将某些文本放置在删除文本的位置，则较旧的节点将围绕较新的文本替换，而不会对其造成干扰。由于在此过程中元素节点（文本的容器）不会从DOM中删除，因此只有当有人将一些文本添加到现有元素中时才会发生这种情况。如果添加了全新的元素，将不会影响任何东西。我将编辑我的问题，将CSS解决方案作为一个选项。正如我所问，其他答案提供了通过纯JS解决问题的创造性方法，但这种方法是迄今为止最简单、最有效的。@jt0dd：请务必检查您支持的浏览器。这种方法存在传统浏览器问题。jfriend00建议更改页面结构，这是一个很好的建议，即使您在页面加载时动态添加包装器元素。@cookiemonster您的两种方法对我都有效，但在实践中，我总是尝试使用最简单的方法，只要它有效。在我的情况下，我在页面加载期间（在我希望隐藏文本的期间）生成了大量动态内容，因此在这种情况下不冒复杂风险的方法是有价值的

$('body').toggleClass('hidetext');