11.1 Modifier le style CSS "inline"
-
Dans cette section on montre comment changer le style "inline" d’un élément individuel.
-
En règle générale, on utilise cette technique pour faire des pages interactives et/ou animés.
-
Le principe est simple, pour accéer ou modifier une propriété CSS on passe par:
element.style.propriete_CSS
// supposons que para12 soit un élément précis de votre DOM
para12.style
.color = "blue"
para12.style
.fontSize = "18pt"
Liste des propriétés DOM CSS
-
Attention (!!!) Les propriétés CSS du DOM ne correspondent pas aux noms "CSS"
-
Pour une liste, cf:
-
http://developer.mozilla.org/en/docs/DOM:CSS
-
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties
-
En gros, on peut deviner le nom DOM:
-
il faut enlever le tiret "-"
-
il faut capitaliser les mots (sauf le premier)
-
par exemple: la propriété CSS "background-color" devenient en DOM CSS "backgroundColor".
-
Voici juste quelques exemples:
DOM CSS
|
Propriété CSS
|
background
|
background
|
backgroundColor
|
background-color
|
borderColor
|
border-color
|
fontFamily
|
font-family
|
fontSize
|
font-size
|
marginBottom
|
margin-bottom
|
marginLeft
|
margin-left
|
Exemple 11-1: Changer dynamiquement le style d’un élément
<script type="text/javascript">
function changeText() {
var p = document.getElementById("pid");
p.style.color = "blue"
p.style.fontSize = "18pt"
}
</script>
.....
<p id="pid"
onclick="window.location.href = 'http://www.cnn.com/';">News Link</p>
<form> <p>
<input value="Change style" type="button" onclick="changeText();">
</p></form>
Exemple 11-2: Changer dynamiquement le style (2)
Exemple 11-3: Bouger un objet
function moveitBy(img, x, y){
var obj = document.getElementById(img);
obj.style.left
= parseInt(obj.style.left)+x+"px"
obj.style.top
= parseInt(obj.style.top)+y+"px"
}
function moveitTo(img, x, y){
var obj = document.getElementById(img);
obj.style.left = x+"px"
obj.style.top = y+"px"
}
-
la fonction parseInt () va extraire un nombre d’un string à partir des premières chiffres (!)
parseInt("10px") == 10; parseInt("10bla20") == 10; pareInt("px10") == NaN;
Voici la partie HTML
<p><div id="image"
style="position: relative; left: 0px; top: 0px;"><img src="tecfa-affiche.gif"></div>
<ul>
<li><a href="javascript:moveitBy('image', 10, 0)
;">
Move by 10px (right)</a></li>
<li><a href="javascript:moveitBy('image', -10, 0);">Move by 10px (left)</a></li>
<li><a href="javascript:moveitBy('image', 0, 10);">Move to 10px (down)</a></li>
<li><a href="javascript:moveitBy('image', 0, -10);">Move to 10px (up)</a></li>
<li><a href="javascript:moveitTo('image', 0, 0);">Move to original position</a></li>
</ul>
Exemple 11-4: Animation en continu
function start() {
pText = document.getElementById("pText");
timer = window.setInterval( "run()", 100 );
}
-
La méthode window.clearInterval(timer) permet de tuer ce processus
-
La fonction run() fait l’animation.
....
pText.style.fontSize = size + "px";
pText.style.left = count + "px";
-
Une expression teste dans quel sens il faut aller (aggrandir ou diminuer)
if ( ( count % 200 ) == 0 ) {
speed *= -1;
pText.style.color = ( speed < 0 ) ? "red" : "blue" ;
firstLine = ( speed < 0 ) ? "Text shrinking" : "Text growing";
}
Exemple 11-5: Tree walking: changer de style
<script>
function do_document (css_class,color) {
mark_tags(document.body,css_class,color);
}
function mark_tags(node,css_class,color) {
// Check if n is an Element Node
if (node.nodeType == 1 /*Node.ELEMENT_NODE*/) {
// Highlight if needed
if (node.getAttribute("class") == css_class)
node.style.color = color;
// Let's see if there are children
if (node.hasChildNodes()) {
// Now get all children of node
var children = node.childNodes;
// Loop through the children
for(var i=0; i < children.length; i++) {
// Recurse on each child
mark_tags(children[i],css_class,color);
} }}
}
</script>
</head>
<body>
<h1>Tree walking</h1>
<input type=button onClick="do_document('important','red');"
value="Highlight important stuff">
<input type=button onClick="do_document('boring','grey');"
value="Highlight boring stuff">
.....
<p class="boring">Let's hope you enjoy this</p>
<p class="important">If you want to reuse this code:</p>
.....
Exemple 11-6: Tree walking: changer de style