Question

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

enter image description here

我看了看，但却找不到有关如何做到这一点的任何事情。 有可能吗？

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

编辑：如果没有，那么相同效果的简单解决方法呢？我注意到我可以使用RGBA不透明度0来实现效果，而无需添加容器元素。唯一的问题是，它也会影响边界。这里font-color:color将是一个非常有用的CSS功能......

Answer 1

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

工作演示：http://jsfiddle.net/jfriend00/Fd7Lq/

// Function for walking the DOM without recursion (faster)
// and calling a callback for each node
var treeWalkFast = (function() {
    // create closure for constants
    var skipTags = {"SCRIPT": true, "IFRAME": true, "OBJECT": true, 
        "EMBED": true, "STYLE": true, "LINK": true, "META": true};
    return function(parent, fn, allNodes) {
        var node = parent.firstChild, nextNode;
        while (node && node != parent) {
            if (allNodes || node.nodeType === 1) {
                if (fn(node) === false) {
                    return(false);
                }
            }
            // if it's an element &&
            //    has children &&
            //    has a tagname && is not in the skipTags list
            //  then, we can enumerate children
            if (node.nodeType === 1 && node.firstChild && !(node.tagName && skipTags[node.tagName])) {
                node = node.firstChild;
            } else  if (node.nextSibling) {
                node = node.nextSibling;
            } else {
                // no child and no nextsibling
                // find parent that has a nextSibling
                while ((node = node.parentNode) != parent) {
                    if (node.nextSibling) {
                        node = node.nextSibling;
                        break;
                    }
                }
            }
        }
    }
})();


var visible = true;
var textNodes = [];
var textNodesNext = [];
var textNodeParents = [];
document.addEventListener("click", function() {
    if (visible) {
        // collect list of all text nodes and their location
        treeWalkFast(document.body, function(node) {
            if (node.nodeType == 3) {
                textNodes.push(node);
                textNodesNext.push(node.nextSibling);
                textNodeParents.push(node.parentNode);
            }
        }, true);    
        // now remove all text nodes from the document
        for (var i = 0; i < textNodes.length; i++) {
            textNodeParents[i].removeChild(textNodes[i]);
        }
    } else {
        // put all text nodes back
        for (var i = 0; i < textNodes.length; i++) {
            textNodeParents[i].insertBefore(textNodes[i], textNodesNext[i]);
        }
        // reset out data structures
        textNodes = [];
        textNodeParents = [];
        textnodesNext = [];
    }
    visible = !visible;
});

Answer 2

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

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

- 然后只需切换hidetext类：

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

（请注意，CSS中其他地方更具体的font-size: !important会覆盖那个，但是，它可能不是一个完美的解决方案。）

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

2 个答案: