javascript - llamar - ¿Cómo puedo detectar DOM listo y agregar una clase sin jQuery?
llamar javascript desde html (8)
¿Intentaste poner al final de tu cuerpo lo siguiente?
<script>
document.body.className = ''javascript'';
</script>
Quiero volver a escribir esta línea sin usar jQuery para que pueda aplicarse más rápido (y antes de la descarga de la biblioteca jQuery). La linea es ...
$(document).ready(function() { $(''body'').addClass(''javascript''); });
Si lo agregué al elemento html , ¿podría dejar de lado la parte preparada para DOM? Sin embargo, un problema con esto es que el validador no le gusta el atributo de clase en el elemento html , incluso si está insertado con JS.
Entonces, ¿cómo podría reescribir eso sin jQuery?
No sé sobre vainilla JS, pero puedes escribir:
document.getElementsByTagName(''body'')[0].className += '' javascript'';
en la parte inferior de la página (antes de cerrar la etiqueta del cuerpo).
Sencillo:
window.onload = function() {
document.body.className = "javascript";
}
O en HTML:
<body onload="document.body.className = ''javascript''">...</body>
A menos que desee diferenciar entre "antes de la carga" y "después de la carga", puede hacerlo de forma estática:
<body class="javascript">...</body>
Si desea reproducir el evento document.ready de jQuery, puede usar los eventos onreadystatechange o DOMContentLoaded cuando corresponda:
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();
}
});
}
Si solo se trata de navegadores modernos, puede colocar esto justo después de la etiqueta de apertura del body .
<script>
document.body.classList.add("javascript");
</script>
Si su objetivo es agregar la clase al body inmediata a medida que se carga la página, tal vez para ocultar elementos no-JS-fallback, puede hacerlo inmediatamente dentro de la etiqueta del cuerpo en lugar de esperar por cualquier evento:
<body>
<script type="text/javascript">
document.body.className+= '' javascript'';
</script>
(aunque en general, si ese es el objetivo, es mejor eliminar los elementos de respaldo a medida que avanza, reemplazándolos con elementos con guiones, de modo que si una parte de los errores de script de todos los demás componentes de la página no se rompen)
Esta es la forma más rápida de enlazar elementos: hágalo inmediatamente después de crearlos (dentro de la etiqueta abierta si solo necesita modificar los elementos; justo después de la etiqueta cerrada si necesita modificar su contenido). Sin embargo, este enfoque tiende a ensuciar la página con bloques <script> feos, por lo que más personas ponen todo el código en la parte inferior o usan un controlador de carga / listo.
solo pon esto
<script>document.body.className += '' javascript'';</script>
antes de </body> etiqueta. Solución simple y fácil (y muy cercana).
window.onload = function() {
var elmt = document.getElementsByTagName(''body'');
if(elmt){
elmt[0].className = ''javascript'';
}
}
Deberias hacer eso.
EDITAR: Actualizado para obtener el elemento por nombre de etiqueta, no ID.