SELFHTML/Aides à la navigation JavaScript/DOM Référence objet| SELFHTML/Aides à la navigation JavaScript/DOM Référence objet |
 |
style |
|
Méthodes:
|
 | |
l'objet style qui se trouve sous l'objet 
all dans la hiérarchie JavaScript, d'après l modèle objet de l'Explorer Internet MS à partir de la version 4.0, règle l'accès aux 
mentions de feuilles de style, définies pour un élément HTML. Vous pouvez lire toutes les mentions de feuilles de style et les modifier de façon dynamique. Ainsi, vous pouvez modifier à loisir des éléments HTML à l'aide de scripts.
L'accès aux éléments HTML se déroule exactement comme pour l'objet all (à ce sujet, lisez sur l'objet all avant tout les passages adresser des éléments HTML et adresser des éléments HTML avec leur nom). ). Pour l'objet style est simplement noté en plus style suivi de la mention de feuille de style désirée.
Même dans le modèle DOM (Document Object Model -(DOM) de la version 2.0 il y a l'objet style. Pour pouvoir accéder aux propriétés et méthodes de l'objet style d'après la syntaxe DOM, vous avez besoin d'un nœud d'élément. Pour accéder aux nœuds éléments existant dans le document, sont employées les méthodes de l'objet document getElementById, getElementsByName et getElementsByTagName . Ensuite, vous pouvez formater l'élément adressé à l'aide de scripts.
Exemple pour l'ancienne syntaxe Microsoft (all):
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function jaunis() {
document.all.textedyn.style.backgroundColor = "yellow";
document.all.textedyn.style.fontSize = "24pt";
document.all.textedyn.style.padding = "5mm";
}
//-->
</script>
</head><body>
<p id="textedyn">Voici le texte</p>
<a href="javascript:jaunis()">jaune</a>
</body></html>
|
L'exemple contient un paragraphe de texte avec le nom id textedyn. En cliquant sur le lien placé au dessous, la fonction jaunis() est appelée. Cette fonction attribue au paragraphe de texte différentes mentions de feuilles de style, par exemple la mention pour la couleur d'arrière plan (backgroundColor) en lui affectant la couleur jaune (yellow). Le paragraphe reçoit ainsi de façon dynamique lorsqu'on clique sur le lien une couleur d'arrière plan jaune, ainsi que les autres attributs.
Il importe peu que l'élément HTML concerné contienne déjà des mentions de feuilles de style auparavant ou non. Dans l'exemple il n'en contenait aucun.
D'après le même schéma, vous pouvez traiter toutes les mentions de feuilles de style que connaît l'Explorer Internet MS. Le tableau propriétés de style dresse la liste de ces mentions de feuilles de style. Veillez cependant aux remarques sur la syntaxe particulière des mentions de feuilles de style en JavaScript.
Exemple pour la syntaxe DOM:
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function regleCSS() {
for(var i = 0; i < document.getElementsByTagName("p").length; i++) {
document.getElementsByTagName("p")[i].style.border = "solid red 10px";
document.getElementsByTagName("p")[i].style.backgroundColor = "#FF9933";
document.getElementsByTagName("p")[i].style.color = "#FFFFFF";
document.getElementsByTagName("p")[i].style.fontSize = "36pt";
}
}
//-->
</script>
</head><body>
<p>Paragraphe</p>
<p>deuxième paragraphe</p>
<p>troisième paragraphe</p>
<p><a href="javascript:regleCSS()">La puissance des feuilles de style!</a></p>
</body></html>
|
L'exemple contient quatre paragraphes. Dans le dernier est noté un lien qui si on le clique appelle la fonction regleCSS(), qui est notée dans l'entête de fichier. Cette fonction accède dans une boucle for et dans l'ordre avec document.getElementsByTagName("p")[i] à tous les éléments p du document. Suivi de style il est accédé aux propriétés CSS de l'élément. Ensuite vient la propriété CSS désirée à laquelle est respectivement affectée une valeur autorisée.
Il importe peu que l'élément HTML concerné contienne déjà des mentions de feuilles de style auparavant ou non. Dans l'exemple il n'en contenait aucun.
D'après le même schéma, vous pouvez traiter toutes les mentions de feuilles de style que connaît CSS 2.0 . Le tableau .
propriétés de style dresse la liste de ces mentions de feuilles de style. Veillez cependant aux remarques sur la syntaxe particulière des mentions de feuilles de style en JavaScript.
 |
Vous devez connaître cette règle importante: Si dans un script une mention de feuille de style doit être lue ou modifiée, le trait d'union devient superflu et la première lettre du mot suivant habituellement le trait d'union doit être en majuscules. Ainsi la mention de feuilles de style background-color s'écrit dans un Script backgroundColor.
Le tableau suivant dresse la liste des propriétés de feuilles de style que connaît l'Explorer Internet MS 4.0. Le tableau contient à gauche la mention de feuilles de style comme vous devez la noter en JavaScript dans le contexte de l'objet style. Dans la colonne du milieu se trouve une courte description de l'usage de la mention. À droite se trouve un lien "description CSS". Ces liens mènent à la description de la mention de feuilles de style concernée dans le chapitre traitant des feuilles de style CSS. Vous devez suivre ces liens si vous voulez savoir quelles valeurs peut avoir la mention de feuilles de style correspondante.
|
|
|
getAttribute()Recherche si un élément HTML contient une certaine mention de feuille de style ou quelle valeur elle a. Retourne la valeur de cette mention de feuille de style au cas ou elle est trouvée, sinon une chaîne de caractères vides "". Attend les paramètres suivants:
1. mention de Style = mention de feuilles de style recherchée.
2. majuscules/minuscules = indiquer true quand il faut différencier la casse pour la mention de feuilles de style ou false, si la distinction ne doit pas être faite.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Test() {
var x
if (document.all)
x = document.all.paragraphe.style.getAttribute("fontSize","false");
else x=document.getElementById("paragraphe").style.fontSize;
alert(x);
}
//-->
</script>
</head><body>
<p id="paragraphe" style="font-size:18pt">un texte</p>
<a href="javascript:Test()">Test</a>
</body></html>
|
L'exemple contient un paragraphe avec le nom id paragraphe et un lien qui si on le clique appelle la fonction Test(). Cette fonction recherche avec getAttribute(), si l'élément portant le nom paragraphe contient une mention de feuilles de style font-size (syntaxe CSS) ou fontSize (syntaxe JavaScript). Étant donné que c'est le cas, la valeur qui lui est affectée (18pt) est recherchée et affichée dans une boite de dialogue.
Quand vous programmez d'après la syntaxe DOM, il suffit comme dans l'embranchement else de l'exemple, d'interroger la propriété CSS du paragraphe ci-dessus de la façon suivante:
x = document.getElementById("paragraphe").style.fontSize
L'édition Macintosh de l'Explorer Internet MS 5.0 n'interprète pas cet exemple.
|
|
removeAttribute()Retire un attribut déterminé d'une mention de feuilles de style. Attend les paramètres suivants:
1. attribut = la mention de feuilles de style désirée dans le repère HTML.
2. majuscules/minuscules = indiquer true quand il faut différencier la casse pour la mention de feuilles de style ou false si la distinction ne doit pas être faite.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Test() {
if (document.all)
document.all.paragraphe.style.removeAttribute("color","false");
else document.getElementById("paragraphe").style.color = "";
}
//-->
</script>
</head><body>
<p id="paragraphe" style="color:red">un texte</p>
<a href="javascript:Test()">Test</a>
</body></html>
|
L'exemple contient un paragraphe avec le nom id paragraphe et un lien qui si on le clique appelle la fonction Test(). Cette fonction retire du paragraphe la mention de feuilles de style color, de telle sorte que le paragraphe perde sa couleur rouge et reçoive la couleur standard pour le texte.
Quand vous programmez d'après la syntaxe DOM, il suffit comme dans l'embranchement else de l'exemple, de retirer la propriété CSS du paragraphe ci-dessus avec l'instruction suivante:
document.getElementById("paragraphe").style.color = ""
Par l'affectation d'une chaîne de caractères vide, la propriété de feuilles de style est retirée de façon dynamique.
L'édition Macintosh de l'Explorer Internet MS 5.0 n'interprète pas cet exemple.
|
|
setAttribute()Ajoute dans un repère HTML déterminé une mention de feuilles de style déterminée. Attend les paramètres suivants:
1. mention de style = mention de feuilles de style désirée.
2. . valeur = = valeur à affecter à la mention de feuilles de style.
3. majuscules/minuscules = = indiquer true quand il faut différencier la casse pour la mention de feuilles de style ou false, si la distinction ne doit pas être faite.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Test() {
if (document.all)
document.all.paragraphe.style.setAttribute("border","thin solid red","false");
else document.getElementById("paragraphe").style.border = "thin solid red";
}
//-->
</script>
</head><body>
<p id="paragraphe">un texte</p>
<a href="javascript:Test()">Test</a>
</body></html>
|
L'exemple contient un paragraphe avec le nom id paragraphe et un lien qui si on le clique appelle la fonction Test(). Cette fonction ajoute dans le paragraphe la mention de feuilles de style border, à savoir avec la valeur thin thin solid red. Ainsi le paragraphe est entouré d'un fin cadre rouge.
Quand vous programmez d'après la syntaxe DOM, il suffit comme dans l'embranchement else de l'exemple, de fixer la propriété CSS du paragraphe ci-dessus avec l'instruction suivante:
document.getElementById("paragraphe").style.border = "thin solid red"
L'édition Macintosh de l'Explorer Internet MS 5.0 n'interprète pas cet exemple.
|
| |
 |
anchors
|
 |
all
|
| SELFHTML/Aides à la navigation JavaScript/DOM Référence objet |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
