Salut amis zeros,

J'ai un problème avec javascript et css... En fait je n'arrive pas a récupérer une valeur css dans une variable.

var visibility = document.getElementById('corps').getElementsByTagName('img')[0].style.visibility;

RESULTAT : La variable visibility reste vide !


Et c'est la même chose avec une condition :

if(document.getElementById('corps').getElementsByTagName('img')[0].style.visibility == 'hidden')

RESULTAT : La condition ne fonctionne pas...


Qu'est ce qui ne va pas dans mon code ?

Bah si la visibilité n'a était préciser nulpart, elle n'existe pas dans les styles {{ Il me semble }}

Et si tu l'as déclarer dans une class, il faut passer par une fonction spéciale me semble t'il.

J'ai déclaré visibility dans ma feuille de style...

T'es sûr que document.getElementById('corps').getElementsByTagName('img')[0] renvoi l'objet que tu espères ?

C'est quoi ton HTML?

Je viens de tester avec

<div id="corps">
<img src="./toto.png">
</div>

et ça marche très bien

Citation : Tiller

T'es sûr que document.getElementById('corps').getElementsByTagName('img')[0] renvoi l'objet que tu espères ?

Certain

Citation : restimel

Je viens de tester avec

<div id="corps">
<img src="./toto.png">
</div>

et ça marche très bien

Ba mon HTML est basiquement le même que celui que tu as testé...

Bah ça ne doit pas si chez lui ça marche... Poste le tiens...

Ok je viens de reverifier mon code :

Quand je met

<img src="select.png" style="visibility: hidden;"/>

Javascript trouve la valeur

Mais avec la feuille de style ca ne marche pas...
Est-ce qu'il y a un moyen pour permettre à javascript d'accéder à la feuille de style ?

.getComputedStyle() ?

.getComputedStyle() ne marche pas sur IE

J'ai trouvé un site intéressant : http://www.quirksmode.org/dom/w3c_css.html (en anglais)

Apparemment il faudrait que j'utilise document.styleSheets[0].cssRules[rang].style.visibility
En faisant une boucle pour trouver le rang de l'élément dans ma feuille de style.

Je vais essayer cette technique...
Mais si quelqu'un trouve une solution plus pratique je lui en serrai reconnaissant.

'fin bon c'est quand même bizarre que ça marche chez restimel...

Quand je disais que ça marchait je croyais que t'avais compris à la remarque de Tiller que style retourne "" si le style n'a pas été explicitement défini à l'élément. Donc en fait je t'es mal compris (c'est surtout le fait que tu disais que ta condition ne marchait pas donc je pensais à une erreur d'accès).

cssRules[] n'est pas compatible IE (ou alors c'est que je ne sais pas l'utiliser correctement). Il me semble qu'il faut le remplacer par imports[] pour IE (mais je n'ai jamais fait de test avec IE sur ce point)

S'il faut que je change le code pour IE, comment je fais pour détecter le navigateur avec javascript ?

tu peux faire de cette manière (par exemple):

var rules=document.styleSheets[0].cssRules; //navigateurs respectant le W3C
if(!rules){
  rules = document.styleSheets[0].imports; // cas d'IE
}
var visibility = rules[rang].style.visibility;

En espérant que imports fonctionne de la même manière que cssRules


sinon tu peux faire quelque chose comme:

if(document.styleSheets[0].cssRules){
  visibility = document.styleSheets[0].cssRules[rang].style.visibility;
}else{
  visibility = document.styleSheets[0].imports //code à changer pour IE...
}

N'ayant pas IE chez moi je ne peux pas tester...

Nickel

Merci à tous !

J'ai ça qui traine au fond d'un tiroir si ça intéresse :

function getCssValue(oElm, strCssRule)
{
	var strValue = '';
	
	if (document.defaultView && document.defaultView.getComputedStyle)
	{
		try
		{
			strValue = document.defaultView.getComputedStyle(oElm, '').getPropertyValue(strCssRule);
		}
		catch(e)
		{
			strValue = '';
		}
	}
	else if (oElm.currentStyle)
	{
		try
		{
			strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
				return p1.toUpperCase();
			});
			strValue = oElm.currentStyle[strCssRule];
		}
		catch(e)
		{
			strValue = '';
		}
	}
	return strValue;
}