Impossible d'accéder aux propriétés du sélecteur CSS à partir de Javascript

Voici une question très fondamentale: pourquoi la fonction finishLoading () dans le code ci-dessous ne peut-elle pas accéder à la propriété 'opacité' pour le sélecteur #myStyle CSS? L'alerte n'affiche rien, et j'ai vérifié que la propriété'opacité 'est' fausse '.

Merci beaucoup!

<html> <head> <style type="text/css"> <!-- #myStyle { opacity: 0.50; } --> </style> <script type="text/javascript"> <!-- function finishedLoading() { alert(document.getElementById('myStyle').style.opacity); } --> </script> </head> <body onload="finishedLoading();"> <div id="myStyle"> hello </div> </body> </html> 

Vous pouvez obtenir les valeurs définies dans la classe uniquement après leur calcul.

 var oElm = document.getElementById ( "myStyle" ); var strValue = ""; if(document.defaultView && document.defaultView.getComputedStyle) { strValue = document.defaultView.getComputedStyle(oElm, null).getPropertyValue("-moz-opacity"); } else if(oElm.currentStyle) // For IE { strValue = oElm.currentStyle["opacity"]; } alert ( strValue ); 

Le problème est que element.style.opacity ne stocke que des valeurs, qui sont définies dans l'attribut de style l'élément. Si vous souhaitez accéder à des valeurs de style, qui proviennent d'autres feuilles de style, regardez quirksmode .

À votre santé,

Je vous suggère de jeter un oeil à jQuery et à certains des messages de Learning jQuery . Cela rendra les choses comme ça très faciles.

L'opacité devrait être un nombre plutôt qu'un booléen. Est-ce qu'il fonctionne dans n'importe quel autre browseR?

Ce lien aide

http://www.quirksmode.org/js/opacity.html

 function setOpacity(value) { testObj.style.opacity = value/10; testObj.style.filter = 'alpha(opacity=' + value*10 + ')'; } 

L'opacité est pour Mozilla et Safari, filtre pour Explorer. La valeur varie de 0 à 10.