25 Déc2015
Modifier dynamiquement les styles
Objectif:
Manipuler les styles des éléments html en javascript.
Énoncé :
soit le document html suivant :
<!doctype html> <html> <head> <title>styles</title> <meta charset="utf-8"> </head> <body> <p id="parag1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <button onclick="changer_style()">Changer Style</button> </body>
- Ecrire la fonction changer_style qui permet de styler le paragraphe au clic du bouton par :
- une couleur blanche.
- un background noir.
- une bordure noire pointillée de 1px.
- un retrait de 5px.
- Définir les propriétés précédentes dans une classe "active" et modifier la fonction changer_style de telle façon qu'elle ajoute la classe "active" au paragraphe.
- Script changer_style()
<script type="text/javascript"> function changer_style(){ var p = document.getElementById('parag1'); p.style.color="white"; p.style.backgroundColor="#bbb"; p.style.border="1px solid gray"; p.style.padding="5px"; } </script> - On commence par la définition de la classe "active"
<style type="text/css"> .active{ color: #fff; background: #000; border: 1px solid black; padding: 5px; } </style>Après on ajoute la classe au paragraphe via la propriété classList, donc la fonction changer_style devient:
function changer_style(){ var p = document.getElementById('parag1'); p.classList.add("active"); }
