Groumphy

Posts tagged with "getElementById"

Javascript non intrusif

Wednesday, 7. February 2007, 06:24:28

dom, javascript, window.onload, getElementById ...

Utiliser la puissance du DOM pour ses scripts

Changer la taille de la police (ou texte) par Javascript

Monday, 17. July 2006, 07:22:28

cookies, css, getElementById, getElementsByClass ...

Comme vu (encore) précédement, il existait de très beau script pouvant faire changer de feuille de style par javascript.

Passons maintenant à une autre méthode : le changement de la taille de la police ou du texte par un Javascript.

Malheureusement, ce n'est pas directement possible avec une quelconque manière de le faire (nativement). De fait, une personne nommée Dustin Diaz a créé une nouvelle fonctionnalité : getElementsByClass().
Cette fonctionnalité permet de travailler sur une classe précise et uniquement celle-ci. Ce qui est plutôt pratique car si nous disposons d'une mise en page précise et que nous ne souhaitons pas voir déformée par un agrandissement global de la page (nous augmenterons donc que la taille de la police d'un conteneur spécifique par exemple).

// Création : Dustin Diaz
//Site : http://www.dustindiaz.com/getelementsbyclass
function getElementsByClass(searchClass, node, tag) { 
var classElements = new Array(); 
if ( node == null ) 
node = document; 
if ( tag == null ) 
tag = '*'; 
var els = node.getElementsByTagName(tag); 
var elsLen = els.length; 
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); 
for (i = 0, j = 0; i < elsLen; i++) { 
if ( pattern.test(els[i].className) ) { 
classElements[j] = els[i]; 
j++; 
} 
} 
return classElements; 
}

Encore une fois, si vous êtes un lecteur fidèle sur les articles concernant le Javascript, j'insiste pour dire que le Javascript est un langage interprété par le navigateur. L'internaute a le choix ou non d'utiliser cette technologie. A utiliser avec parcimonie donc.
Pour l'accessibilité directe, rien ne vaut de passer par l'interface du navigateur (le plus souvent Ctrl + Molette de la souris ou Menu Affichage et choisir les différentes tailles...).

Il est bien entendu possible (et plus aisé) d'agrandir la police de toute une page... Cela peut se faire tout aussi bien par Javascript. Point besoin d'utiliser la fonction décrite ci-dessus mais utilisons simplement une autre feuille de style (Cf. article précédent) ou une ligne de Javascript (utilisation de document.getElementByTag sur la balise Body par exemple).

Mais pourquoi faire simple lorsqu'il est plus aisé de faire complèxe.
Complèxe ne serait pas le bon mot vu que quelques personnes se sont déjà penchées sur le sujet et qu'il ne nous reste plus qu'à utiliser simplement et de manière pratique ce qu'elles ont développé. Nous pouvons même l'améliorer.

Une méthode que j'apprécie plus particulièrement et qui utilise justement getElementsByClass() est celle faite par Le Journal du Developpeur (Xavier Borderie).
Elle permet de fait à spécifier une classe sur laquelle est portée la fonction ainsi que la taille.

        // Xavier Borderie
function tailleFonte(classe, taille) { 
cibles = getElementsByClass(classe); 
for (i = 0; i < cibles.length; i++) { 
        cibles[i].style.fontSize = taille; 
        } 
    }

Maintenant que nous avons nos deux fonctions, il ne nous reste plus qu'a faire le (x)HTML et la CSS...

Du coté CSS :

  h1 {
font-family: "Times New Roman", Times, serif;
font-size: medium;
font-weight: bold;
font-variant: small-caps;
color: #0099FF;
background-color: #CCCCCC;
width: 100%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
}
  #conteneur {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
color: #FFFFFF;
background-color: #0099FF;
width: 100%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0033FF;
  }
  #conteneur #entete {
  
  }
  
  #conteneur #corps {
font-size: x-small;
  }
  #conteneur #corps #zonetest {
font-size: small;
  }
  .serif {
font-family: serif; 
font-size: x-small; }
  li {
display: inline;
  }
  li:before { 
content: "|";
  }
  li:after {
content: "|";
  }

Du coté HTML :

<div id="conteneur">

<div id="entete">
<h1>Changer la taille de police par Javascript</h1>
</div>

<div id="corps">
<p>Augmenter ou diminuer la taille de la police</p>
<ul>
<li><a href="javascript:tailleFonte('serif', 'small');">Augmenter la taille</a></li>
<li><a href="javascript:tailleFonte('serif', 'x-small');">Diminuer la taille</a></li>
</ul>
<div id="zonetest">
<p id="nickname" title="monnickname" class="serif">Mon nickname est Groumphy</p>
</div>

</div>

</div>

Evidence même... Une classe, une taille avec les inconvéniants et avantages que j'ai cité ci-dessus.

5 comments

StyleSwitcher : changer le css à la volée via un javascript

Tuesday, 11. July 2006, 16:36:00

styleswitcher, switch, style, css ...

Bien souvent les solutions pour adapter les styles sont composée de PHP, ASP etc. Heureusement, il a été développé il y a quelques temps une solution en JavaScript.

Excepté erreur de ma part, le premier à avoir tenté l'expérience fut l'excellent site A List Apart. Il a donc donné un article précis et conci. Passons le en revue.

Pour changer le style, il faut que le navigateur du client puisse interpréter les fonctions. Evidement il faudra que le Javascript soit activé. De fait, l'utilisation de la balise NoScript n'est pas à oublier.

En second temps, il faut lier les feuilles de styles de la manière suivante :

<link title="css1" rel="stylesheet" type="text/css" href="css1.css" media="screen">
<link title="css2" rel="alternate stylesheet" href="css2.css" type="text/css" media="screen">

Que se passe t'il ici ?
Nous donnons simplement une feuille de style générale et par défaut (la css1.css). Nous attribuons aussi un style secondaire (la css2.css) ; et c'est tout !

Dans la continuité, il nous faut créer une fonction en Javascript. La fonction sera principalement orientée vers la reconnaissance des balises en Javascript via getElementByTagName.
Bien entendu cette reconnaissance sera liée avec l'élément Link que nous utilisons pour lier les feuilles de styles.

Voici donc LA fonction (oui oui, vous avez bien lu la majuscule) qui a été bien concue :

function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
     if(a.getAttribute("rel").indexOf("style") != -1
        && a.getAttribute("title")) {
       a.disabled = true;
       if(a.getAttribute("title") == title) a.disabled = false;
     }
   }
}

Le plus dur est fait.
Il nous faut simplement maintenant voir pour lancer la fonction sur un simple appel.
Le site A List Apart donne l'exemple de faire l'appel de la fonction setActiveStyleSheet sur un élément onClick.

D'un avis personnel, je préfère l'appel de la fonction via "un bon vieux lien" dans lequel on précise un appel Javascript.
Faisons le point sur cela :

<a href="javascript:setActiveStyleSheet('css1')">Style 1</a>
<a href="javascript:setActiveStyleSheet('css2')">Style 2</a>

il nous suffit maintenant d'inclure ces liens dans une liste non ordonnée que nous placerons par exemple en Inline pour le Display.
Dans la continuité, nous pouvons bien entendu utiliser des pseudo-classes :before et :after pour agrémenter une présentation (par exemple avec un Content: " | "; ).

Par la suite, il faut simplement stocker le choix de l'utilisateur courant dans un cookies et le tour est joué ; en effet, la fonction ici n'est pas "permanente", elle n'a pas d'élément pour lire une information qu'elle a déjà été exécutée ou autre et ne sait pas le style choisis a la prochaine visite de la page.

La Les questions que l'on pourrais se poser ~~est la~~ sont les suivantes :

Est-ce que ce genre de fonction existe aussi pour des feuilles de styles implémentées en dur dans la page ?
Est-ce qu'il existe un moyen de faire varier la balise utilisée, par exemple sur un Import ?

J'essayerais de trouver une fonction similaire dans les prochains jours afin de vérifier cela... A défaut, je ferais quelques tests pour vérifier en changeant principalement le getElementByTagName etc.

A suivre donc...

5 comments