Je veux ajouter une classe à la balise body sans attendre le chargement du DOM, mais je veux savoir si l'approche suivante serait valide. Je suis plus préoccupé par la validité que si les navigateurs le supportent pour l'instant.Puis-je cibler un élément avant qu'il ne soit fermé?
<body>
$("body").addClass("active");
...
</body>
Merci, Steve
Le .elementReady() plugin semble être assez proche de ce que vous cherchez.
Il fonctionne en utilisant une boucle setInterval, qui se ferme dès que document.getElementById() renvoie un élément pour id.
Vous pourriez probablement faire une légère modification de ce plugin (ou commettre une mise à jour/correctif) pour autoriser des sélecteurs génériques (au moins pour "tagNames") au lieu de simplement id s.
Je ne crois pas qu'il y ait une façon cross-browser compatible vraiment fiable pour répondre à un élément avant qu'il ne soit chargé - autre que ce genre de setInterval piratage
Sauf si vous êtes en mesure de placer votre commande javascript intérieur l'élément cible comme @JasonBunting suggère.
Si l'élément n'existe pas dans les DOM, la recherche ne parviendra pas à le trouver et l'action ne sera pas appliquée. Si vous ne pouvez pas le faire dans la fonction $ (document) .ready(), vous pouvez essayer de placer le code après l'élément référencé. Je crois que cela fonctionnera.
<body>
<div id='topStories'></div>
<script type='text/javascript'>
$('div#topStories').addClass('active');
</script>
</body>
Si vous devez ajouter la classe au corps, je serais certainement utiliser $ (document) .ready().
Réponse courte: cela dépend. Apparemment, selon mes tests, la réponse semble être oui, selon ce que vous voulez. Je viens de tester ceci:
<html>
<head>
<style type="text/css">
.foobar { background-color: #CCC; }
</style>
</head>
<body>
<script type="text/javascript">
window.document.body.className = "foobar";
</script>
<div style="border: solid 1px"><br /></div>
<script type="text/javascript">
// happens before DOM is fully loaded:
alert(window.document.body.className);
</script>
<span>Appears after the alert() call.</span>
</body>
</html>
Dans IE 7, lorsque le alert() a lieu, la valeur est correctement réglée, mais le style n'a pas encore été appliqué (il est rapidement appliqué dès que le DOM terminé le chargement).
Dans Firefox, le style a été appliqué au moment où le alert() a lieu.
En tout cas, j'espère que cela vous sera utile.
C'était très utile.
Pour mettre un peu de monde réel à la question.
Je construis avec l'hypothèse que JavaScript n'est pas supporté, puis remplace le JavaScript. Le problème est que lorsque je dois attendre que le DOM se charge avant que mes overrides kick dans le site passe par l'étape de scintillement comme il est construit. J'espère que si je peux ajouter une classe de "active" à l'élément body avant que le reste du site soit chargé, je serai capable d'appliquer des styles supposés JavaScript avant que la page ne soit rendue.
Ce que je ne veux pas faire est d'ajouter ceci et recevoir un appel quand Firefox4 sort que je n'aurais pas dû le faire. Si vous jetez un coup d'oeil sur un site que j'ai construit, vous verrez qu'il se dégrade gracieusement, mais ce ficker me dérange (surtout si une publicité bloque le site). Je pourrais prendre l'approche des autres et juste la construire avec JS assumé, mais allez - c'est juste paresseux ...
Qu'est-ce qui vous a été très utile? Vous ne savez pas à quoi vous faites spécifiquement référence ... –
@Jason, La connaissance que FF et IE réagissent différemment. Cela répond essentiellement à ma question initiale, mais vu que Mar m'a donné ma solution, j'ai dû lui donner les félicitations. J'aurais aimé pouvoir le partager :) –
Fondamentalement, la réponse est non. Dans IE6 et Firefox 2 (les navigateurs auxquels j'ai le plus d'expérience), l'élément n'est pas dans le DOM avant la fin de la balise (ou le rendu de la page est terminé, pour un XHTML invalide). Je sais que jQuery fournit des méthodes pratiques qui semblent réagir assez rapidement pour éviter de "scintiller" dans la plupart des cas. Vous l'utiliseriez comme ceci:
<script>
$(document).ready(function() {
$("body").addClass("active");
});
</script>
<body>
..
..
..
</body>
Mais c'est à peu près tout pour javascript.
Bien sûr, dans l'exemple que vous avez fourni, vous pouvez facilement accomplir tout le même effet:
<body class="active">
</body>
Plutôt que d'ajouter une classe à votre tag <corps> vous trouverez peut-être plus facile d'ajouter une classe à la < balise html > en faisant:
<script type="text/javascript">
document.documentElement.className = 'active';
</script>
Donc, si je vous ai bien, vous dites l'élément n'existe pas jusqu'à ce qu'il soit fermé. Est-ce exact? –
Je dis que c'est le moyen le plus sûr. Je suppose que, puisque l'élément peut ne pas être entièrement spécifié (balise de fin manquante), le navigateur ne l'ajouterait pas au DOM tant qu'il n'aurait pas été complètement analysé. Je ne peux pas pointer vers une norme qui impose cela, cependant. – tvanfosson
Apprécié. Je vais élaborer un peu plus et voir que je suscite plus de neurones - des acclamations. –