Récupérer valeur du fichier CSS en JavaScript

Sujet résolu

15 mai 2010 à 15:45:41

Bonjour,

j'ai regardé sur Google, mais les différentes manières de faire que j'ai trouvé ne marche pas...

Je souhaite récupérer en JavaScript la largeur hauteur d'un élément définit dans une feuille de style externe (pas dans les baises html).

donc pas de : element.offsetHeight ni de element.style.height

Comment faire ?

wapper

15 mai 2010 à 16:25:40

Euh, height, c'est hauteur, hein...

Pour ton soucis, ça dépend de l'élément en question, un peu de code?

Oneil67

15 mai 2010 à 16:39:39

Citation : wapper

Euh, height, c'est hauteur, hein...

Ah la la... >_<

. Édité

Citation : wapper

Pour ton soucis, ça dépend de l'élément en question, un peu de code?

Un petit exemple alors :

<!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" >
<head>

<style type="text/css">
#bloc    { display:none; width:200px; height:200px; }
</style>

<script type="text/javascript">
<!--

function f()
{
    var hauteur;

    hauteur = ??? ; // Récupérer le "height:200px;" de la feuille de style

    alert(hauteur);
}

// -->
</script>

</head>
<body>

<div id="bloc" onclick="fonction();"></div>

</body>
</html>

Le problème étant que vu que la div est display:none; on ne peut pas utiliser element.offsetHeight :'(

Nyro Xeo

15 mai 2010 à 16:51:58

window.onload = function()
{
	alert(getStyle('bloc', 'height'));
}
function getStyle(el,styleProp)
{
	var x = document.getElementById(el);
	if (x.currentStyle)
		var y = x.currentStyle[styleProp];
	else if (window.getComputedStyle)
		var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
	return y;
}

T'as cherché au moins ?

Référence : http://www.quirksmode.org/dom/getstyles.html

Oneil67

15 mai 2010 à 17:18:35

Citation : Nyro Xeo

T'as cherché au moins ?

Oui oui, mais ça ne fonctionnais pas :euh:

Ton code marche très bien, merci

.

Existe t-il la même chose pour récupérer le CSS avec une class ?

Nyro Xeo

15 mai 2010 à 17:32:43

Tu veux dire comme ceci ?

var bloc = null;
window.onload = function()
{
	bloc = document.getElementsByClassName('bloc');
	alert(getStyle(bloc[0], 'height'));
}
function getStyle(x, styleProp)
{
	if (x.currentStyle)
		var y = x.currentStyle[styleProp];
	else if (window.getComputedStyle)
		var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
	return y;
}

(Sachant qu'on a remplacé id="bloc" par class="bloc".)

Attention avec la compatibilité de getElementsByClassName() :

Citation : http://www.javascriptkit.com/domref/elementmethods.shtml

Supported in FF3+, Opera 9.5+, Safari 3+, though not IE8.

D'ailleurs, y a pas que getElementsByClassName(), la fonction getStyle() ne marche pas sur IE non plus.

Mais dis-moi, pourquoi est-ce que tu as besoin de faire tout ça ?

Oneil67

15 mai 2010 à 17:43:44

Citation : Nyro Xeo

Mais dis-moi, pourquoi est-ce que tu as besoin de faire tout ça ?

Pour accélérer le mes fonctions sans devoir faire plusieurs calculs pour arrivé à ces valeurs

Merci.