Скрыть тег 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> 

Так что правильный способ, чтобы скрыть ненужные теги, оказываемые в браузере, когда я использую тот же HTML-страницы с таким же CSS файл с отзывчивым Режим?

Примечание: Если вы используете firebug, даже если вы установили браузер display:none, по-прежнему загружайте все div, включая изображения, но просто не показывайте вам.

Answer 1

Вы можете установить display:none стиль элемента, который вы хотите, чтобы показать (это будет даже не Flink в пользовательском интерфейсе), а затем удалить его с помощью JavaScript:

HTML:

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

JS :

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

Answer 2

Все должно быть хорошо. display: none; должен выполнить эту работу. Если вы манипулируете DOM с помощью JavaScript, вы можете применить встроенный стиль.

Answer 3

Если вы хотите скрыть некоторые элементы, лучше установить style на элемент. так как это уменьшит количество поисков для механизма CSS, чтобы найти, какие элементы соответствуют селектору CSS на внешней таблице стилей. так что что-то вроде этого будет делать трюк:

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