UPPREVIOUSNEXT  Technologies Internet et Education, © TECFA
  11. HTML Style

11. HTML Style

11.1 Modifier le style CSS "inline"

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:
  • 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"
      }
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 );
  }
 ....
 pText.style.fontSize = size + "px";
 pText.style.left = count + "px";
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

 

11.2 Utilisation de setAttribute

element.setAttribute("style,"définition CSS .....")

var el = document.getElementById("some-element");
el.setAttribute("style", "background-color:darkblue;");
 
 

UPPREVIOUS NEXT -- TIE