Le DOM et les CSS

Depuis l’apparition de l’objet style dans Internet Explorer (rien n’étant venu le remplacer ou lui faire concurrence), il est possible de lire ou initialiser n’importe quelle valeur de style d’un élément, comme si la description était placé dans l’attribut style de cet élément.

Le DOM a fini par l’adopter dans son niveau 2 et donc tous les navigateurs compatibles sont susceptibles de les lire et les interpréter.

Cas particuliers

Pour écrire les propriétés de style qui contiennent un trait d’union, comme margin-top par exemple, vous devez modifier la syntaxe d’écriture et avoir recours au Camel style, c’est à dire tout écrire en minuscule, sauf la première lettre de chaque nouveau mot qui passe en majuscule, donc margin-top devient marginTop. Simple non ?

Pour effacer une description, initialisez la valeur de la propriété sur une chaîne vide «  ». Par exemple : marginTop = «  » est différent de marginTop = 0. En effet, dans le premier cas, vous ne décrivez pas la propriété et laissez donc au navigateur utiliser sa valeur par défaut, alors que dans le second cas vous forcez la valeur à 0.

La propriété float existant également en Javascript, vous ne pouvez pas l’utiliser de manière directe. En effet cela porte à confusion avec la définition d’un nombre décimal. Il faut à la place utiliser cssFloat. Et dans la série pourquoi faire simple lorsque l’on peut faire compliqué, Internet Explorer, lui n’accepte que styleFloat.

Donc, et comme cela ne cause pas de soucis particulier, afin de s’assurer de l’interprétation par l’ensemble des navigateurs, utilisez les deux.

De même, l’attribut class ne pouvant être utilisé par rapport à Javascript, est remplacé par className. Cette valeur peut contenir une ou plusieurs valeurs séparées le cas échéant par des virgules, comme className = « une,autre ».

Permutation de la classe d’un élément

Une manière assez directe de changer l’apparence d’un élément qui contient diverses propriétés reste de changer sa classe. Au lieu de devoir modifier une à une l’ensemble des propriétés d’un élément, il peut être plus souple et plus rapide de lui affecter une nouvelle classe. Nous allons le voir au cours de cet exercice.

Mise en place et description

Le document HTML dom_scripting_05.htm qui est composé simplement d’une imbrication de DIV, va nous servir de fenêtre modifiable pour les quelques exercices suivants. Regardons sa structure, une première DIV global avec pour id #fenetre. Une balise h2 avec pour id #barre, nous servira de titre et de barre d’interaction.

Une seconde DIV jouera le jeu du conteneur avec pour id #conteneur et une classe par défaut conteneur_a. Enfin, une simple balise P pour faire office de contenu.

Les éléments liés sont deux fichiers Javascript, un pour la gestion du préchargement, comme nous l’avons vu dans la partie précédente du tutoriel, et le second va contenir la fonction que nous allons mettre en place.

Un autre fichier lié est présent, il s’agit de la feuille de style CSS. Aucune particularité, si ce n’est que celle-ci contient deux classes que nous allons permuter : la classe conteneur_a et la classe conteneur_b.

Script d’initialisation et de mise en place

Aucune manipulation particulière du DOM, il suffit d’ajouter une action utilisateur sur la barre de titre qui aura pour fonction de permuter tour à tour les deux classes conteneur_a et conteneur_b présentes dans le feuille de style CSS.

Commençons par définir une fonction d’initialisation caleFenetre() et ajoutons là à notre gestionnaire onload() personnalisé.

function caleFenetre(){
  ...
}
addLoadEvent(caleFenetre);

Fonction caleFenetre() et action utilisateur

Récupération des informations

Deux phases au sein de cette fonction : d’une part, il faut récupérer les informations nécessaires, c’est à dire un pointeur sur l’identifiant conteneur (celui qui sera affecté) et un autre sur la barre de la fenêtre (celui qui contiendra l’interaction) …

var cnt = document.getElementById('conteneur')
var barre = document.getElementById('barre')

Ajout de l’interaction

… et d’autre part, l’application de l’évènement onclik() sur la barre. Un test de condition simplifié vérifiant si le nom de la classe actuel est conteneur_a, en fonction duquel la classe conteneur_a ou conteneur_b est appliquée.

barre.onclick = function(){
  cnt.className = (cnt.className == "conteneur_a")?'conteneur_b':'conteneur_a';
}

Modifier un style et changer l’interface

Avec le fichier dom_scripting_06.htm, nous nous retrouvons avec le même type de structure de document que lors de l’exercice précédent. Nous allons cette fois-ci, jouer uniquement sur une description particulière du style et ce au travers de la classe style présente dans le DOM. Il suffit donc de pointer sur une propriété du style et de l’affecter. Nous allons pour illustrer cet exemple, simplement interagir sur la propriété display de l’élément #conteneur, en la permutant entre block et none.

L’approche du code se fait de la même manière que pour l’exercice précédent : deux étapes

Dans un premier temps récupération des informations et en second temps on applique la fonction à l’élément #barre. Toutefois, la description display n’étant pas activée par défaut, il est préférable de le faire de manière explicite lors d’une fonction d’initialisation, également ajoutée à notre fonction de chargement personnalisée.

function init(){
    var cnt = document.getElementById('conteneur')
    cnt.style.display ='block';
}
function caleFenetre(){
    var cnt = document.getElementById('conteneur')
    var barre = document.getElementById('barre') 
    barre.onclick = function(){
      cnt.style.display = (cnt.style.display == 'block')?'none':'block';
    }
}
addLoadEvent(init);
addLoadEvent(caleFenetre);

Un élément peut agir sur un autre

Encore une fois utilisons la même structure HTML que pour les exercices précédents, mais pour ce fichier dom_scripting_07.htm, modifions légèrement le conteneur, en minimisant le texte de l’élément P à une simple phrase et ajoutons un ensemble d’éléments de liste, n’ayant aucun nœud texte, mais seulement un attribut title qui contient une référence à une couleur hexadécimale, comme le présente le schéma ci-contre.

Nous allons avec le DOM attribuer une action à chacun de ces éléments de liste pour qu’il affecte la couleur d’arrière plan du conteneur en fonction de la couleur contenu dans le titre. En plaçant cette attribution dans une boucle, nous pourrons ainsi facilement ajouter ou supprimer des ‘pastilles’ de couleur à notre palette.

Fonction d’initialisation – Récupération des informations et mise en boucle

Comme pour les précédentes initialisations, le code se découpe en deux phases, une première partie qui consiste à récupérer les informations nécessaires, à savoir, l’ensemble des éléments de liste LI sous forme de tableau en retour à la fonction getElementsByTagName() et une seconde partie qui va boucler sur chacun de ces éléments de liste.

function init(){
    ... 
    var pastille = cnt.getElementsByTagName("li");
    var nb_pastille = pastille.length
    for (var i = 0;i<nb_pastille;i++){
    ...
    }
}

Récupération des information de couleur

L’information de couleur étant contenu dans l’attribut title, usons de la syntaxe directe, element.attribut. Nous aurions pu utiliser une syntaxe plus verbeuse comme element.getAttibut(attribut) qui aurait fait le même travail. Une fois la couleur récupérée, appliquons là à la propriété d’arrière plan de la pastille en cours. Ce qui donnera un aperçu visuel de la valeur contenue.

var couleur_temp = pastille[i].title
pastille[i].style.backgroundColor = couleur_temp;

Action de permutation de la couleur d’arrière plan – Mise en place de l’action

Il faut appliquer à chacune de ces pastilles une action permettant de permuter la couleur d’arrière plan de l’élément #conteneur. Appelons simplement la fonction changeFond qui va prendre cela en charge, et passons lui l’argument this reflétant l’objet appeleur.

pastille[i].onclick = function(){
  changeFond(this)
}

Fonction de permutation

La fonction changeFond() reçoit un argument précisant l’objet appeleur, nommons-le arbitrairement arg. Récupérons un pointeur sur l’instance de l’élément #conteneur, puis appliquons lui une couleur d’arrière plan sur son objet style, correspondant à l’argument title du paramètre reçu.

function changeFond(arg){
    var cnt = document.getElementById('conteneur')
    cnt.style.backgroundColor = arg.title
}

En savoir plus

Vous trouverez une excellente source d’informations sur l’utilisation des styles au travers du DOM, sur ce premier article portant sur le DHTML, et son complément sur ce second article. Vous pouvez également vous rapprochez des recommandations du w3c.

Aller plus loin

DOM Scripting: Web Design with JavaScript and the Document Object Model

Jeremy Keith

DOM Scripting: Web Design with JavaScript and the Document Object Model gives you everything you need to start using JavaScript and the Document Object Model to enhance your web pages with client-side dynamic effects. Jermey starts off by giving you a basic crash course in JavaScript and the DOM, then move on to provide you with several real world examples built up from scratch including dynamic image galleries and dynamic menus, and show you how to manipulate web page style using the CSS DOM, a...

• Friends of Ed
• Partenaire

DOM Enlightnement

Cody Lindley

Over the past decade, developers have buried the DOM under frameworks that simplify its use. This book brings these tools back into focus, using concepts and code native to modern browsers. You’ll understand the role jQuery plays in DOM scripting, and learn how to use the DOM directly in applications for mobile devices and specific browsers that require low overhead....

• O'reilly
• Partenaire