JavaScript>Astuces -
Publié le : 27-011-2015 | Modifié le : N/A

JavaScript astuces en vrac

Plusieurs astuces et indications en JavaScript.

Rejouer une animation CSS sur des liens différents.

Lorsque vous jouez une animation CSS en JavaScript sur un clique, celle-ci ne s'exécute plus lors du deuxième clique et suivants.

Utiliser .onmousedown, puis dans la fonction réinitialiser le .style.animation en le laissant vide.
Puis après rajoutez le Listener avec la fonction d'appel de ladite animation.
.onmousedown doit être utilisé pour chaque Listener.

Un écouteur en cas de redimensionnement.

// Appelle une fonction de manière répétée, avec un certain délai fixé entre chaque appel.
setInterval( function(){ ... }, 50);
//Obligatoire pour setInterval sinon pas de recalcule des dimensions.
window.onresize = this.resize;

Un hack SVG pour ajouter, supprimer et commuter les classes CSS.

Utilisation de .prototype(pour ajouter des propriétés à un objet).Voir Todd Motto: Hacking SVG.

nextElementSibling, trouver le premier enfant d'un parent.

Propriété en lecture seule, qui retourne le première élément suivant le parent spécifié, ou null si le parent est le dernier dans la liste.

.classList.toggle

fonction de commutation, qui permet d'ajouter une classe ou de la retirer à un élèment. Voir MDN element.classList.

Bonne utilisation de .style.transform sous Android.

Si les navigateurs additionnels sous android acceptent .style.transform="-webkit-..., le navigateur par défaut sur android est plus capricieux. Les style ne s'appliqueront pas, il faut utiliser .style.webkitTransform, pour que cela fonctionne. Et après le = ne pas écrire le préfixe -webkit- (testé sous Android 4.2 avec le navigateur par défaut).