Question Comment puis-je détecter DOM prêt et ajouter une classe sans jQuery?


Je veux réécrire cette ligne sans utiliser jQuery pour qu'elle puisse être appliquée plus rapidement (et avant le téléchargement de la bibliothèque jQuery). La ligne est ...

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

Si je l'ai ajouté à la html élément à la place, serais-je capable de laisser la partie prête DOM? Un problème avec ceci est que le validateur n'aime pas l'attribut de classe sur le html élément, même s'il est inséré avec JS.

Alors, comment pourrais-je réécrire cela sans jQuery?


19
2017-11-25 06:49


origine


Réponses:


Si vous voulez reproduire les jQuery document.ready événement, vous pouvez utiliser le onreadystatechange ou DOMContentLoaded événements, le cas échéant:

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();
    }
  });
}

45
2017-11-25 07:11



Je ne connais pas la vanille JS, mais vous pouvez écrire:

document.getElementsByTagName('body')[0].className += ' javascript';

au bas de la page (avant de fermer la balise body).


2
2017-11-25 06:55



Si votre but est d'ajouter la classe à body dès que la page est chargée, peut-être pour masquer les éléments no-JS-fallback, vous pouvez le faire juste immédiatement dans la balise body plutôt que d'attendre des événements:

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

(bien qu'en général si c'est le but, il vaut mieux supprimer les éléments de repli au fur et à mesure que vous les remplacez par des éléments scriptés, de sorte que si une erreur de script élimine tous les autres composants de la page).

C'est le moyen le plus rapide de lier des éléments: faites-le juste après leur création (à l'intérieur de la balise open si vous devez uniquement modifier les éléments; juste après la balise close si vous devez modifier leur contenu). Cependant, cette approche a tendance à jeter la page avec la laideur <script> bloque, ce qui explique pourquoi de plus en plus de personnes mettent le code au fond ou utilisent un gestionnaire de chargement / prêt.


1
2017-11-25 10:51



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

Ça devrait le faire.

EDIT: mis à jour pour obtenir le nom de l'élément par tag et non l'identifiant.


0
2017-11-25 06:55



Simple:

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

Ou en HTML:

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

À moins que vous souhaitiez différencier "avant onload" et "after onload", vous pouvez le faire de manière statique:

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

0
2017-11-25 07:05



Avez-vous essayé de mettre à la fin de votre corps les éléments suivants?

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

0
2017-11-25 09:43



mets juste ça

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

avant </body> marque. Solution simple et facile (et très proche).


0
2017-11-25 09:47



Si vous traitez simplement avec les navigateurs modernes, vous pouvez le placer juste après l’ouverture. body marque.

<script>
     document.body.classList.add("javascript");
</script>

0
2018-03-13 22:39