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

Voici une question très simple: pourquoi la fonction finishLoading() du code ci-dessous ne peut pas accéder à la propriété 'opacity' du sélecteur CSS #myStyle? L'alerte n'affiche rien et j'ai vérifié que la propriété 'opacity' est 'false'.Impossible d'accéder aux propriétés du sélecteur CSS à partir de Javascript

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>

Source

2009-06-26 Anonymous

Je vous suggère de jeter un oeil à jQuery et certains des postes à Learning jQuery, il fera faire des choses comme cela très facile.

Source

2009-06-26 10:17:00 Tom

par exemple. $ ('# myStyle'). css ("opacity", "0.8") – Fermin

Bien que je sois heureux d'utiliser jQuery ou quoi que ce soit d'autre fera le travail, je voudrais comprendre ce concept que je suis manquant qui explique le comportement que je vois. Peut-être pourriez-vous me dire quels domaines spécifiques de HTML/CSS/Javascript je devrais rechercher? –

jQuery est cool, mais c'est juste une abstraction de la fonction que Phoenix explique dans sa réponse. – Boldewyn

L'opacité doit être un nombre plutôt qu'un booléen. Est-ce que ça marche dans n'importe quel autre navigateur?

Source

2009-06-26 10:17:25 Fermin

Ah, désolé, je n'étais pas clair. Je m'attendrais à un float/nombre en essayant d'accéder à la propriété d'opacité, mais il ne semble pas que la valeur existe. Par exemple: si (! Document.getElementById ('myStyle'). Style.opacity) alerte ('Aw oh!'); Ce code affiche toujours l'alerte dans Safari et Firefox. Je suppose que je manque un concept fondamental ici, je ne suis pas sûr de ce que c'est ou ce que je peux faire pour accéder à la propriété 'opacité'. Merci pour la réponse! –

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 + ')'; 
}

opacité

est pour Mozilla et Safari, filtre pour Explorer. La valeur est comprise entre 0 et 10.

Source

2009-06-26 10:20:04

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);

Source

2009-06-26 10:27:40 rahul

Règle des commentaires! currentStyle gère IE, getComputedStyle() est supporté par n'importe qui d'autre. document.defaultView est un moyen d'obtenir la 'fenêtre' qui est responsable du rendu du document. D'ailleurs, '-moz-opacity' ne fonctionnera plus (depuis FF 2, et dans Opera et WebKit, il ne l'a jamais fait). – Boldewyn

... j'utilise une simple 'opacité' au lieu de '-moz-opacity', j'aurais dû ajouter. – Boldewyn

Mais l'opacité i FF n'est pas appliquée. – rahul

Le problème est que element.style.opacityque des valeurs magasins, qui sont définies dans l'attribut style de l'élément. Si vous souhaitez accéder aux valeurs de style provenant d'autres feuilles de style, consultez quirksmode.

Cheers,

Source

2009-06-26 10:28:55 Boldewyn

ah oui, ou prenez l'approche de phoenix. – Boldewyn

Ah, ha! Merci beaucoup pour le lien et l'explication. C'est très clair maintenant. –

Cependant, ceci n'est pas seulement le cas pour l'opacité, mais pour toutes les autres propriétés de style. Essayez d'ajouter 'couleur: rouge;' à votre feuille de style et alerte (document.getElementById ('myStyle'). style.color) à votre gestionnaire d'événements. – Boldewyn

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

Répondre

Questions connexes