DHTML - Animer des éléments

Décembre 2016

Le principe

L'animation des éléments présents sur une page Web se fait en modifiant
leur propriété (position, hauteur, largeur, visibilité, z-index, ...) ou en
utilisant leur méthodes (fonctions associées à un élément).
Cela ne peut se faire qu'à l'aide d'un code Javascript,
permettant de modifier les propriétés des éléments suite à

des événements utilisateurs (clic sur la souris, déplacement de la souris, ...),
et cela grâce à une structuration des éléments dans la page définie
par le DOM (Document Object Model).

Le Document Object Model (DOM)

Le Document Object Model est un principe consistant à représenter
le navigateur et le document qui y est affiché comme une hiérarchie d'objets
(voir éventuellement la section programmation orientée
objet
pour comprendre le concept objet), possèdant des propriétés intrinsèques
et auxquels ont peut accéder en décrivant la hiérarchie qui mène à chaque
objet.

Accéder aux éléments d'une page

Le dom fournit plusieurs méthodes permettant d'accédé a un élément
Voici un petit aperçu des méthodes a utiliser afin d'avoir accès au éléments d'une page


syntaxe definition
getElementById("id_element)acces a un element corespondant a un id
querySelector('#element span')acces au premier element trouvé corespondant a un selecteur css
getElementsByTagName('div')renvoi un tableau contenant un lien vers tous les element ayant en communs la balise mis en paramètre
getElementsByName('nom_element')renvoi un tableau contenant un lien vers tous les element ayant en communs le nom mis en paramètre
querySelectorAll('#element span')renvoi un tableau contenant un lien vers tous les elements ayant en communs le meme selecteur css mis en paramètre
childNodes
renvoi un tableau contenant un lien vers tous les éléments directe contenu dans l’élément référent

Les propriétés modifiables

Toutes les propriétés css son modifiable (position,dimensions, couleur, police, bordures...etc) il existe deux facons de faire.

La première facon consiste a modifier un style a la fois en utilisant la méthode style

document.getElementById("id_element").style.left="20px"
document.getElementById("id_element").style.backgroundColor="red"


La deuxieme facon consiste a modifier la class css de l'element il existe trois méthodes


methodes definition syntaxe
setAttrubutemodifie l'attribut class de la balise sélectionnéelement.setAttrubute('class','style_a style_b');
classNamemodifie l'attribut class de la balise sélectionnéelement.className='style_a style_b';
classListajoute ou retire une class de la balise sélectionnéelement.classList.add('style_a');
element.classList.remove('nom_de_la_classe');


.

A voir également :

Ce document intitulé «  DHTML - Animer des éléments  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.