Question

我有以下页面：

<div class="background">
        <section class="statements">
            <article>
                <div class="article_background hidden" id="forge"></div>
                <p>
                    Greek Mythology states that Hephaistos was the god of blacksmiths, metalworking, carpenters,
                    craftsmen, artisans, sculptors, metallurgy, fire, and volcanoes.
                    During his lifetime he accomplished the creation of wonderous items; Achilles armor, Hermes winged
                    helmet and sandals, even going as far as to create automatons to work for him.
                </p>
            </article>
        </section>
</div>

，我想使其不可见。我尝试使用visibility，但问题是它仍然占用空间。

我在display和visibility上做了很多尝试，但结果却并非我所希望的。

我正在尝试用纯CSS完成此操作

Answer 1

可以通过以下简单的代码设置解决任何js问题：

.background {
        overflow: hidden;
        visibility: hidden;
        max-height: 0px;
}

.background {
        animation: visibility 0ms 4.5s both;
        -webkit-animation: visibility 0ms 4.5s both;
}

@-webkit-keyframes visibility {
        100% {
                max-height: inherit;
                visibility: visible;
        }
}

@keyframes visibility {
        100% {
                max-height: inherit;
                visibility: visible;
        }
}

由于元素的起始高度为0且不可见，因此它们不占用滚动条中表示的空间，但在访问时仍会加载。

然后，此函数在设置4.5s之后，消除了限制并显示了在css和html中预先配置的所有内容。希望这对某人有帮助！

Answer 2

您只需要display:none隐藏该元素，然后display:block或display:inline（取决于您使用的是哪种元素）即可再次显示它。或者，实际上，您可以仅将display:none应用于元素，然后删除该应用程序以恢复以前的样式。

关于计时部分，您可以使用setTimeout()将其隐藏一段时间。

let theDiv = document.querySelector("div");

document.querySelector("button").addEventListener("click", function(){
  theDiv.classList.add("hidden");    // Hide the element by applying the style
  
  // Then set up a function to run 5 seconds later
  setTimeout(function(){
    theDiv.textContent = "I'm back!";
    theDiv.classList.remove("hidden"); // Remove the class that hides the element
  }, 5000);
});

.hidden { display:none; } /* Will be applied for 5 seconds */

<button>Hide the text for 5 seconds:</button>
<div>Now you see me...</div>
<div>I'll be here the whole time, but I'll move up when the element above me gets hidden and I'll move down when it comes back.</div>
<div class="hidden">You'll never see me</div>
<div>&copy; 2019</div>

如何隐藏x元素的html元素而不占用空间？

2 个答案: