getElementById + getElementByTagName

**amestoche** · 06/02/2008, 16h24

Bonjour,
peut etre que mon intitulé n'est pas assez clair, enfet voici un bout de mon fichier CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
#photo1 {
	width:221px;
	height:211px;
}
 
#photo1 img {
	margin-top: 14px;
	margin-left: 560px;
}

et dans mon fichier "index.html", je souhaiterais modifier en javascript (normal, sinon je serais pas ici !) les propriétés de la balise "#photo1 img" ?
Help !
Merci d'avance

**le_chomeur** · 06/02/2008, 16h29

modifier la classe directement ce n'est pas possible mais si tu souhaites modifier l'élément qui a cette classe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById('photo1').style.marginTop = "tavaleur" + px;

**SpaceFrog** · 06/02/2008, 16h32

et c'est

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

getElementsByTagName

**le_chomeur** · 06/02/2008, 16h35

lol c'est vraiment histoire de dire

**JulienC** · 06/02/2008, 16h37

Envoyé par le_chomeur

modifier la classe directement ce n'est pas possible mais si tu souhaites modifier l'élément qui a cette classe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById('photo1').style.marginTop = "tavaleur" + px;

Tu es allé trop vite ! Il désire modifier les propriétés de la balise "#photo1 img". Il faut donc utiliser document.getElementById('photo1').getElementsByTagName('img') qui renverra un tableau, puis le parcourir, et pour chaque élément :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
elt.style.marginTop = tavaleur + 'px';

**le_chomeur** · 06/02/2008, 16h43

C'est pas faux

Toutes mes confuses pour ma demie réponse ...

**franculo_caoulene** · 06/02/2008, 16h46

Salut,

Une piste faite rapidement, d'autres te proposeront certainement mieux. Mais sache tout de même qu'il doit y avoir ce genre de réponse dans le forum déjà.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="content-type"content="text/html; charset=UTF-8" />
	<title>test html</title>
	<style type="text/css">
		body {background-color:#000000;}
		div {width:800px; background-color:#111111;}
			ul {margin:0 auto; width:400px; background-color:#222222; color:#ffffff;}
 	</style>
</head>
<body>
	<div id="div">
		<ul>
			<li>0</li>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
	<script type="text/javascript">
	var cn = document.getElementById("div").childNodes;
	for (var i=0; i<cn.length; i++) {
		alert(cn[i].tagName);
		if (cn[i].tagName=="UL")
			cn[i].style.backgroundColor = "#aaaaaa";
	}
	</script>
</body>
</html>

edit: ah ben j'ai pas fini de poster qu'il y a déjà mieux!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
	var cn = document.getElementById("div").getElementsByTagName('li');
	for (var i=0; i<cn.length; i++) {
			cn[i].style.backgroundColor = "#aaaaaa";
	}

**amestoche** · 06/02/2008, 16h51

C'est bon merci a tous, ben en fait j'étais bien partie mais je ne connaissais pas l'existance de ce fameux "s" de "getElementsByTagName" !
En tout cas merci de m'avoir répondu aussi rapidement.
A la prochaine

**Bezout** · 06/02/2008, 17h12

C'est que tu n'as jamais utilisé getElementsByTagName alors

Par contre je sais pas vous mais moi j'aime pas faire #id dans les CSS je prefere les .classname

**E.Bzz** · 06/02/2008, 17h17

Envoyé par Bezout

Par contre je sais pas vous mais moi j'aime pas faire #id dans les CSS je prefere les .classname

Le but n'est pas le même !

#id => 1 élément (forcément !)
.className => une liste de 1 à N éléments

Mais par choix on peut définir une class par élément, effectivement ...

A+