Scribd
Importer
35 vues5 pages

Exemples de manipulation DOM en JavaScript

Le document présente des exercices sur le Document Object Model (DOM) en HTML et JavaScript. Le premier exercice consiste à créer une fonction pour changer le style d'un paragraphe au clic d'un bouton, tandis que le second exercice implique la création d'un tableau avec des champs de type range pour modifier dynamiquement les propriétés d'un titre. Un script JavaScript est fourni pour gérer les changements de style en fonction des valeurs des inputs de type range.

Transféré par

abdoufenni62
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
35 vues5 pages

Exemples de manipulation DOM en JavaScript

Le document présente des exercices sur le Document Object Model (DOM) en HTML et JavaScript. Le premier exercice consiste à créer une fonction pour changer le style d'un paragraphe au clic d'un bouton, tandis que le second exercice implique la création d'un tableau avec des champs de type range pour modifier dynamiquement les propriétés d'un titre. Un script JavaScript est fourni pour gérer les changements de style en fonction des valeurs des inputs de type range.

Transféré par

abdoufenni62
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Td 5 : Document Object Model

Exercice 1 :
<!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>

1. 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.
2. 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.
Exercice 2 :

Créer un document html contenant des champs de type range et un titre dans un tableau html (voir l'exemple sur
la figure ci-dessous) :

change-style-by-range

2. Créer le script qui permet de changer les propriétés (background,padding,height,width,arrondi,rotation) du


titre en milieu en changeant leurs valeurs via les inputs de type range.
Exemple d’exécution

change-style-by-range2

</head>

<body>

<div >

<table border="1">

<tr>
<td>couleur de fond (rgb)</td>

<td>

0<input type="range" min="0" max="255" step=5 name='color' oninput='update(this)' value="0">255

</td>

<td rowspan="6" width="400" align="center">

<h1 id="p1">Titre de test</h1></td>

</tr>

<tr>

<td>padding</td>

<td>

0<input type="range" name="padding" min="0" max="30" step=5 oninput='update(this)' value="0">30

</td>

</tr>

<tr>

<td>height</td>

<td>

0<input type="range" min="5" max="200" name="height" step=50 value="0" oninput='update(this)'>20


0

</td>

</tr>

<tr>

<td>width</td>

<td>

0<input type="range" min="5" max="200" name="width" step=50 value="0" oninput='update(this)'>200

</td>

</tr>

<tr>

<td>arrondi</td>

<td>

0<input type="range" min="5" max="30" name="radius" step=5 value="0" oninput='update(this)'>30

</td>

</tr>

<tr>

<td>rotation</td>

<td>
0<input type="range" min="5" max="180" name="rotation" step=5 value="0" oninput='update(this)'>1
80

</td>

</tr>

</table>

</div>

</body>

Exemple 1 :
On a utilisé l’événement "oninput" qui se produit immédiatement après changement de valeur de l'input [Link] pouvez utiliser
l’événement "onchange" qui est mieux supporté par les navigateurs mais qui se produit après perte de focus.

Le script :

<script type="text/javascript">

/*on a attribué des noms pour chaque input en html , pour qu'on puisse teseter sur [Link]("name") et
faire le traitement approprié. */

function update(elem){

var p1=[Link]("p1");

if([Link]("name")=="color"){

[Link]="rgb("+[Link]+","+[Link]+","+[Link]+")";

var c= [Link];

[Link]="rgb("+c+","+c+","+c+")";

else if([Link]("name")=="padding"){

[Link]=[Link]+"px";

else if([Link]("name")=="height"){

[Link]=[Link]+"px";

else if([Link]("name")=="width"){

[Link]=[Link]+"px";

else if([Link]("name")=="radius"){
[Link]=[Link]+"px";

else if([Link]("name")=="rotation"){

[Link]="rotate("+[Link]+"deg)";

</script>

Vous aimerez peut-être aussi