javascript - style - window title jquery




Как я могу определить готовность DOM и добавить класс без jQuery? (6)

Я хочу переписать эту строку без использования jQuery, чтобы ее можно было применить быстрее (и перед загрузкой библиотеки jQuery). Линия это ...

$(document).ready(function() { $('body').addClass('javascript'); });

Если я добавлю его в элемент html , смогу ли я оставить готовую часть DOM? Одна из проблем заключается в том, что валидатору не нравится атрибут class в элементе html , даже если он вставлен с помощью JS.

Итак, как бы я переписать это без JQuery?


Вы пытались поместить в самый конец своего тела следующее?

<script>
    document.body.className = 'javascript';
</script>

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

<body>
    <script type="text/javascript">
        document.body.className+= ' javascript';
    </script>

(хотя в целом, если это и есть цель, лучше по мере необходимости удалять запасные элементы, заменяя их скриптовыми элементами, чтобы в случае ошибки одного фрагмента скрипта все остальные компоненты на странице не ломались.)

Это самый быстрый способ привязки к элементам: делайте это сразу же после их создания (внутри открытого тега, если вам нужно только изменить элементы; сразу после закрытого тега, если вам нужно изменить их содержимое). Однако этот подход имеет тенденцию засорять страницу уродливыми блоками <script> , поэтому все больше людей размещают код в нижней части или используют обработчик загрузки / готовности.


Если вы хотите воспроизвести событие jQuery document.ready , вы можете использовать события onreadystatechange или DOMContentLoaded где это применимо:

function domReady () {
  document.body.className += " javascript";
  // ...
}

// Mozilla, Opera, Webkit 
if ( document.addEventListener ) {
  document.addEventListener( "DOMContentLoaded", function(){
    document.removeEventListener( "DOMContentLoaded", arguments.callee, false);
    domReady();
  }, false );

// If IE event model is used
} else if ( document.attachEvent ) {
  // ensure firing before onload
  document.attachEvent("onreadystatechange", function(){
    if ( document.readyState === "complete" ) {
      document.detachEvent( "onreadystatechange", arguments.callee );
      domReady();
    }
  });
}

Просто:

window.onload = function() {
  document.body.className = "javascript";
}

Или в HTML:

<body onload="document.body.className = 'javascript'">...</body>

Если вы не хотите проводить различие между «до загрузки» и «после загрузки», вы можете сделать это статически:

<body class="javascript">...</body>

просто положи это

<script>document.body.className += ' javascript';</script>

перед </body> . Простое и легкое (и очень близкое) решение.


window.onload = function() {
   var elmt =  document.getElementsByTagName('body');
   if(elmt){
      elmt[0].className = 'javascript';
   }
}

Это должно сделать это.

РЕДАКТИРОВАТЬ: Обновлено, чтобы получить элемент по имени тега, а не ID.





jquery