0

浏览器渲染页面时如何隐藏不必要的 HTML 标签？我正在开发一个响应式主题，现在我只是display: none;用来隐藏所有标签（<div>/<img>/<span>）。但据我所知，浏览器会读取所有 DOM，然后应用所有规则，包括 CSS 和 JavaScript。

css

.desktop {
    display:none;
}

html

<div class="desktop">
    <img src= " ..
    <div id="container" ...
    <span class="font ...
</div>

那么，当我在响应模式下使用具有相同 CSS 文件的相同 HTML 页面时，隐藏浏览器呈现的不必要标签的正确方法是什么？

注意：如果您使用 firebug，即使您使用display:none浏览器设置仍然会加载所有 div，包括图像，但不会显示给您。

4

3 回答 3

0

您可以将display:none样式设置为您想要显示的元素（它甚至不会在 UI 中闪烁），然后使用 javascript 将其删除：

HTML：

<div style="display: none;" id="hideme">Hide me</div>

JS：

window.onload = function() {
   document.getElementById("hideme").style.display = "block";
}
于 2013-07-04T14:59:15.837 回答
0

这应该没问题。display: none;应该做的工作。如果您使用 JavaScript 操作 DOM，则可以应用内联样式。

于 2013-07-04T15:00:01.587 回答
0

如果要隐藏某些特定元素，最好style在元素上设置 。因为这将减少 CSS 引擎查找哪些元素与外部样式表上的 CSS 选择器匹配的查找量。所以像这样的东西可以解决问题：

<div id="container" style="display:none"></div>

于 2013-07-04T15:03:21.053 回答