css - 浏览器渲染时隐藏html标签

Question

如何在浏览器渲染页面时隐藏不需要的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，包括图像，但不会显示给您。

Answer 1

您可以将 display:none 样式设置为您确实希望显示的元素(它甚至不会在 UI 中闪烁)，然后使用 javascript 将其删除:

HTML:

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

JS:

window.onload = function() {
   document.getElementById("hideme").style.display = "block";
}