javascript - 如何阻止所谓不可见的 javascript 占用空间？

Question

我不太擅长编程，但我做了一些研究，发现了这一小串 javascript，可以让我们在点击每个 javascript 链接按钮时立即在页面上播放声音:

<embed src=reset.wav autostart=false width=0 height=0 id=sound7 enablejavascript=true>

问题是，当我放入其中几行来定义不同的声音时，它们开始占用页面上的空间。我已将它们全部移至代码的最底部，紧接在结束所有主要内容的 div 关闭之后以及正文关闭之前(见下文)。通过这种方式，它们不会弄乱元素的位置，但仍然会在其他所有内容下方造成空白，这是令人沮丧的，因为它使滚动条不必要地出现。

</div>
<embed src=reset.wav autostart=false width=0 height=0 id=sound7 enablejavascript=true>
<embed src=reset2.wav autostart=false width=0 height=0 id=sound8 enablejavascript=true>
</body>
</html>

我已经看到了一些关于如何不使用visibility=hidden和使用display=none的答案，但我不确定如何将这些应用到这串代码，因为我是新手。我需要更改此字符串的哪些部分或在何处添加代码的其他部分的示例将非常感激。

------------------更新---------------------------------------- -------

出于某种原因，Microsoft Word(是的，我承认这就是我正在使用的)不允许我在这些嵌入周围插入任何样式或 div 来应用“显示:无”。也许我对自己在做什么还不够了解，但即使我使用以下代码成功地将“display:none”应用于每个嵌入，声音也会停止播放，即使空白已被有效删除:

<embed style='display:none' src=reset.wav ....>

然后我想到了另一个解决方案。我在这个页面上堆叠了许多元素，并且认为如果不可见的声音代码条目要占用空间，它们可以只重叠元素，这样就不会移动或添加任何内容，并且由于它们没有视觉方面，因此它们不会覆盖任何内容。我研究了重叠的工作原理并应用了它，它正在起作用!

<embed style='position:absolute;z-index:1' src=reset.wav autostart=true
width=0 height=0 id=sound1 enablejavascript=true>

Answer 1

需要明确的是，您发布的内容是 HTML，而不是 JavaScript。这不是管理页面中声音的最佳方法，但是，假设您想保留此方法:

如果它们正在显示或导致布局问题，最简单的方法是将它们包装在 display:none 的 div 中。

<div style="display:none;">
    <embed...>
    <embed...>
    <embed...>
</div>

一种“更干净”的方法是向所有这些嵌入添加一个公共(public)类，然后为它们设置一个公共(public) CSS 规则:

<embed class="mysounds" ... >

<style>
     embed.mysounds { display:none; }
</style>