getElementById + getElementByTagName

Version imprimable

06/02/2008, 16h24
amestoche

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

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
06/02/2008, 16h29
le_chomeur
modifier la classe directement ce n'est pas possible mais si tu souhaites modifier l'élément qui a cette classe :
Code:

1 2 document.getElementById('photo1').style.marginTop = "tavaleur" + px;
;)
06/02/2008, 16h32
SpaceFrog

et c'est

Code:

getElementsByTagName
06/02/2008, 16h35
le_chomeur

lol c'est vraiment histoire de dire ;)
06/02/2008, 16h37
JulienC
Citation:
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:

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:

1 2 elt.style.marginTop = tavaleur + 'px';
06/02/2008, 16h43
le_chomeur

C'est pas faux 8O
Toutes mes confuses pour ma demie réponse ...

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:

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:

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

06/02/2008, 16h51
amestoche

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
06/02/2008, 17h12
Bezout

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
06/02/2008, 17h17
E.Bzz

Citation:

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+
06/02/2008, 17h31
SpaceFrog

on peut faire un prototype getElementsByClassName ... je me demande si ce n'est pas déja dans les contribs ...
06/02/2008, 17h35
E.Bzz

Citation:

Envoyé par SpaceFrog

on peut faire un prototype getElementsByClassName ... je me demande si ce n'est pas déja dans les contribs ...

C'est pas le $$(className) de certaines librairies existantes ?
06/02/2008, 19h59
SpaceFrog

c'est possible EBzz dans prototype par exemple..
Mais bon prendre toute la lib pour une focntion ... ;)
07/02/2008, 09h57
E.Bzz

Citation:

Envoyé par SpaceFrog

Mais bon prendre toute la lib pour une focntion ... ;)

:king:

Je parlais juste de s'en "inspirer" ;)

A+