Question

如果我向特定div提供<button type="submit" name="save_album" class="btn" id="save_album" onclick="document.getElementById('album_form').submit()" value="Save Album">Save Album</button>属性。那么，我的问题是当页面加载时div加载了吗？

Answer 1

简短回答：是的，加载。

更长，更好的答案：是的，HTML文件中的所有元素都会加载并成为DOM的一部分，这意味着它们可以使用JavaScript进行定位，无论是否显示。如果使用display：none添加任何元素，该元素将被加载到页面上，但display：none属性将告诉浏览器隐藏它（用户根本无法与它进行交互）。然后你可以展示它，或用它做你想做的任何事情。

根据MDN显示：none将：

关闭元素的显示（它对布局没有影响）;所有   后代元素也关闭了它们的显示。该文件   被渲染就像元素不存在一样。

渲染元素框的尺寸，但其内容为   看不见，请参见能见度属性。

这样做的好处是，您可以添加仅在用户点击按钮时显示的叠加层。然后添加一些JavaScript函数，以便在用户单击它时，将显示叠加层。魔法！

您可以看到此确切功能here

Answer 2

<div style="display:none">
    <p>
        This div has display: none.
    </p>
</div>

<div>
    <p>
        This div has default display property.
    </p>
</div>

一个简单的实验会告诉你div将在页面中呈现，但只是隐藏给读者。

按F12打开控制台，你可以在你的DOM中找到显示为：none的div。

Answer 3

将加载元素，但不会影响DOM。

Answer 4

嗯，网络财团说

display: none;

值会导致元素不显示在文档中。它对布局没有影响。

可信来源：www.w3.org/wiki/CSS/Properties/display

这是什么意思？这有点棘手。它仍然在文档中但是没有出现在那里，或者它根本不存在？例如，当您使用visibility: hidden;时，该元素将变为不可见，但仍然采用它所占用的空间。相反，display: none;＆＃39; dissapears＆＃39;从页面来看，它没有占据空间，它已经消失了...... 但该元素仍可通过DOM访问。将显示设置为无，确保根本不生成框模型。这对所有元素后代都有效。

Answer 5

是绝对div在页面上加载但不显示或获取空间。

CSS＆＃34;显示：无;＆＃34;属性

5 个答案: