在 CSS 中同时使用可见性：隐藏和显示：无？答案

【问题标题】：Using visibility: hidden and display: none together in CSS?在 CSS 中同时使用可见性：隐藏和显示：无？
【发布时间】：2010-08-25 15:02:23
【问题描述】：

我想一起使用的原因是我想隐藏像 display: none 这样的内容，而不留下任何空白作为可见性： hidden 。

同时我希望当用户从网页复制整个表格时不要复制隐藏的内容，不是因为它是敏感信息，而是因为用户隐藏了该字段，因此不希望它被复制。 visibility: hidden 不会复制但 display: none 会，所以我进退两难。

有人知道解决办法吗？

编辑：
我最终所做的只是建议的，将信息保存为 Javascript（因为它不是敏感信息）并使用 Javascript 动态创建/删除。

【问题讨论】：

标签： html css

【解决方案1】：

我不认为给元素visibility: hidden 会阻止用户复制表中的信息，尽管这可能是浏览器特定的行为。看看我设置的测试：http://jsfiddle.net/a9JhV/

Firefox 3.6.8 在 Windows 7 上的结果是

Copy ME!    Don't copy me :(    Copy ME!    Copy ME!
Copy ME!    Don't copy me :(    Copy ME!    Copy ME!

这没有按预期工作。

我已经编写了一些代码，这需要花费相当多的时间来编写...看看这里：http://jsfiddle.net/a9JhV/7/

它使用 jQuery 来隐藏和显示表格列——实际上是从 DOM 中删除它们，而不仅仅是玩弄它们的可见性等等。呸！

【讨论】：

好吧，从简短的测试来看，使用 visibility: hidden 的 div 不会复制其中的信息，但它更多的是我想要的功能，而不是实际使用 visibility: hidden。
就你的测试而言，你是对的，它不像我在 Firefox 中要求的那样工作，但它在 chrome 中工作:)

【解决方案2】：

为什么不从页面中删除节点？您可以使用以下方法完成此操作：

<script type = 'text/javascript' language = 'JavaScript'>
document.getElementById('yourDivId').innerHTML = '';
//OR
document.removeChild(getElementById('yourDivId')); //(I think this is right...document might need to be replaced by the div's parent)
</script>

【讨论】：

我首先想要的是沿着这些思路，但是页面上有复选框可以让用户隐藏或显示表格的列，我怎样才能保留表格列的顺序当我完全删除它们而不重新绘制整个表格时？

【解决方案3】：

您应该使用 javascript 删除“隐藏”的 DOM 对象，然后如果用户想要它重新创建它。例如，来自已删除记录的数据可以存储在会话存储或隐藏输入中。

【讨论】：

【解决方案4】：

如果您想要隐藏源中的元素，请将它们放在单独的文本文件中并使用类似 ajax 的调用加载它...这将阻止 html 出现在源中。

如果您在内容上方放置清晰的图像，他们也将无法轻松突出显示（并且通过使用 javascript，您可能会禁用他们执行 ctrl+a 的能力）

希望有帮助！

【讨论】：

【解决方案5】：

创建一个对象来表示表格是个好主意：

var myTable = function(tableName){
    // If you want to assign columns dynamically you could create this.addColumn();
    this.Columns = new Array(
                   new Array("row1","row2","row3","row4"),
                   new Array("row1","row2","row3","row4")
                   );

    this.reBuild = function(){
        for (col in this.Columns){
            for(row in this.Columns[col]){
                // put the cell in the table
            }
        }
    };
};

我没有测试这段代码，它应该只是说明存储和构建表格的要点。

【讨论】：