Accès aux attributs de style

07 août 2008, 11:31

Bonjour,

J'ai un souci de lecture sur des attributs de style passé à une balise DIV.

Code HTML

<div id="log_frame" class="frame index_log"> </div>

Code CSS

div {
	background-color: #FFFFFF; 
	overflow: hidden;
}

div.frame {
	position: absolute;
	background-image: url(../images/frame_backg.png);
	border-style: solid;
	border-width: 1px;
	border-color: #CCCCCC;
	background-repeat: repeat-x;
}

div.index_log{
	position: absolute;
	width: 295px;
	height: 140px;
	top: 150px;
	left: 350px;
}

Code javascript

Code : Tout sélectionner

try{
	calque = document.getElementById('log_frame');
	x = (screen.width - calque.style.width)/2;
	y = (screen.height - calque.style.height)/2;
	alert(calque.style.width + ", " + calque.style.height + ", " +x + ", " + y);
	calque.style.left = x + "px";
	calque.style.top = y + "px";
}catch(err){
	alert(err);
}

Mon code Javascript ne me retourne aucun des attributs (width et height) de style passés à mon DIV.

Si vous avez une réponse, merci d'avance...

NOTE : Arf ! Serait-il possible que l'on ne puisse pas accéder aux attributs des styles définis dans le CSS, mais seulement à ceux définis dans la balise elle-même (par l'attribut "style=") ?

07 août 2008, 16:36

A tout hasard, ton DIV n'aurait pas besoin d'un évènement du genre onMouseOver ?
Parce-que rien n'appelle ton code JavaScript

Et aussi, si tu utilise FireFox, je te conseille FireBug

07 août 2008, 16:51

En lisant un peu, je crois que la note que tu met en bas de ton message est la bonne, il y'a aparemment une différence entre la notion de style d'un élément (impactable par class css, inline css ou autre) et l'attribut style d'un élément HTML. Du coup je suis tombé sur cette petite doc que je trouve très sympatique:

http://www.howtocreate.co.uk/tutorials/ ... ipt/domcss

Et j'ai adapté ton code un peu:

Code : Tout sélectionner


var calque = document.getElementById('log_frame'), x, y;
if( window.getComputedStyle ) {
  x = (screen.width - window.getComputedStyle(calque,null).width) / 2;
  y = (screen.height - window.getComputedStyle(calque,null).height) / 2;
} else if( calque.currentStyle ) {
  x = (screen.width - calque.currentStyle.width) / 2;
  y = (screen.height - calque.currentStyle.height) / 2;
}

calque.style.left = x + "px";
calque.style.top = y + "px";

08 août 2008, 09:08

Bravo!

Juste un petit souci, la valeur récupérée dans les attributs width, height, left, top... peut contenir l'unité(px, pt, %...), ce qui fausse le calcul numérique (résultat retourné = NaN).

Donc, on peut ajouté au code JS ceci :

Code : Tout sélectionner

			var calque = document.getElementById(divId),x ,y;
			var reg=new RegExp("(px)(pt)(%)", "g"); // Expression régulière
			if( window.getComputedStyle ) {
                                // On nettoie les valeurs des attributs qui nous interessent
				ws = parseInt(window.getComputedStyle(calque,null).width.replace(reg,""));
				hs = parseInt(window.getComputedStyle(calque,null).height.replace(reg,""));
				x = (screen.width - ws) / 2;
				y = (screen.height - hs) / 2;
			 } else if( calque.currentStyle ) {
                                // On nettoie les valeurs des attributs qui nous interessent
				ws = parseInt(calque.currentStyle.width.replace(reg,""));
				hs = parseInt(calque.currentStyle.height.replace(reg,""));				 
				x = (screen.width - ws) / 2;
				y = (screen.height - ws) / 2;
 			}
			calque.style.left = x + "px";
			calque.style.top = y + "px";

08 août 2008, 14:46

d'ailleurs si tu lis le lien que j'avais posté, il faudrait même en faire plus, IE a tendance aparemment à donner les info quand il veut...

Accès aux attributs de style

Qui est en ligne