1

对，我是 CSS 菜鸟。我正在尝试整理隐藏 div 的各种方法。

例如：

display:none;
visibility:hidden;

还有更深奥的吗？

忘记 JQuery、JavaScript、事件......我只是想知道一个包含大量内容和子 div 的 div 最终隐藏的各种 CSS 方式？

我想要这个的原因是因为我在这里查看一些代码并且 div 是不可见的。为什么我不知道？它可能在父 div 中。

div 有各种类，这个看起来像罪犯 -

.div-content {

    position: absolute;
    left: 70px;
    right: 0;
    top: 55px;
    bottom: 0;

    display: block;

    overflow-x: hidden;
    overflow-y: auto;

    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    padding-left: 0;
    margin: 0;

    /*width: 90%;*/

    background-image: none !important;
    background-color: #F8F7F7;

}

我只是通过评论各种其他类来将其缩小到这个类。当这个类被注释掉时 - 我可以看到 div。

4

4 回答 4

11

几种可能：

  • display: none- 这将导致浏览器不呈现它。它也会使它完全从屏幕阅读器中消失，所以要小心。
  • visibility: hidden- 这将导致浏览器呈现它，它不可见，但会留下与元素大小相对应的空间。
  • position: absolute并将其发送到一个荒谬的位置（例如，left: -99999px; 假设父母的overflow未设置为autoor scroll）。- 当您希望元素实际上不可见但仍存在于源或 DOM 中时，这很有效。
  • 将widthand设置height为 0，并确保overflow: hidden- 与上面相同，元素将完全不可见，但仍存在于 DOM 或源中。
  • opacity: 0visibility: hidden-只能通过不同的方式（即改变元素的实际不透明度）达到相同的效果。

现在这一切都取决于你为什么需要它。

  • 你想让元素完全消失吗？display: none（并使其重新出现display: block）是您的选择。
  • 你想动画它吗？使用opacity: 0or width&height可能是更好的选择，也许使用一些 JavaScript。
  • 希望屏幕阅读器可以访问它，但实际上不可见（例如，隐藏的图像标题？），position: absolute; left: -99999px效果很好。
于 2013-08-16T12:23:09.370 回答
2

虽然不是一个好习惯，但您可以使用

opacity:0
于 2013-08-16T12:22:44.493 回答
1

我不知道你为什么要问这样的问题，但这是隐藏元素的另一种方法：

element.style {
    width: 0px;
    height: 0px;
    overflow: hidden;
}
于 2013-08-16T12:20:31.873 回答
1

另一个：

element.style {
    position: absolute;
    left: -10000000px;
}
于 2013-08-16T12:20:49.650 回答