11528 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Assigner une class à un élément pou lui appliquer un style

Bonjour,

Je travaille sur un script qui doit me permettre de changer dynamiquement le style de certains éléments d'une page. (Leurs enfants peuvent aussi être modifier.)

Pour des raisons de maintenance, je ne souhaite pas devoir gérer les styles dans le JS lui-même. J'aimerais donc me passer de l'objet style.

Ainsi, j'ai opté pour l'utilisation de la méthode setAttribute() qui me permet de donner une class aux l'éléments qui doivent subir la modification. Le changement de présentation se fait donc via la feuille de style qui contient une définition pour la nouvelle classe.

Cela fonctionne parfaitement sous firefox et opéra mais... devinez quoi... ça ne marche pas sous IE6.

J'ai d'abord pensé que IE ne supportait pas la méthode setAttribute() mais en inspectant le dom avec la DevToolBar de ce navigateur, le changement de classe semble avoir bien eu lieu.

Il semble donc que malgré la nouvelle classe, IE n'applique pas la défintion CSS qui lui correspond...

J'espère que l'un de vous pourra me donner un moyen de régler ce problème.

En guise d'exemple, je vous fourni cette source où j'ai essayé de simplifier au mieux la situtation


<!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=iso-8859-1" />
<title>Test setAttribute</title>
<script type="text/javascript">
	function style1(){
			document.getElementById("block").setAttribute("class", "style1");
	}

	function style2(){
		document.getElementById("block").setAttribute("class", "style2");
	}
</script>
<style type="text/css">
	.style1 {
		background: red;
		height: 150px;
		border: solid 10px black;
		padding: 10px;
	}

	.style1 span {
		font: small-caps xx-large bold;
		color: black;
	}

	.style2 {
		background: yellow;
		height: 350px;
		width: 20%;
		margin-left: 30%;
		border: double 10px green;
		padding-top: 25px;
		text-align: center;
	}

	.style2 span {
		font-size: x-large;
		font-style: italic;
		color: red;
	}

</style>
</head>
<body>
<ul>
	<li><a href="javascript:style1()">style 1</a></li>
	<li><a href="javascript:style2()">style 2</a></li>
</ul>
<div id="block"><span>Block</span></div>
</body>
</html>


Merci pour votre aide.
Modifié par Mathieu_vd (13 Aug 2006 - 09:58)
Modérateur
Salut,

Effectivement, pour IE, tu dois passer par className car setAttribute('class','toto') ne fonctionne pas. Smiley cligne
Merci beaucoup, koala64.

J'ai remplacé 
document.getElementById("block").setAttribute("class", "style1");

par
document.getElementById("block").className="style1";


A présent, cela fonctionne parfaitement sous IE6, firefox et Opéra.

Ce que je ne m'explique pas, c'est que l'inspecteur dom de IE indique que le changement de classe à bien eu lieu avec setAttribute()...
Modifié par Mathieu_vd (13 Aug 2006 - 09:57)
Bonjour,

C'est normal, car IE reconnait en fait setAttribute("className", "foo")

(la différence étant "className" au lieu de "class")
Modifié par Laurent Denis (13 Aug 2006 - 10:01)
Sujet clos
Aller à