Nie można uzyskać dostępu do właściwości selektora CSS z JavaScriptu

Oto bardzo podstawowe pytanie: dlaczego funkcja finishLoading() w poniższym kodzie nie może uzyskać dostępu do właściwości "krycie" dla selektora CSS #myStyle? Alert nie wyświetla niczego i zweryfikowałem, że właściwość "krycie" ma wartość "fałsz".Nie można uzyskać dostępu do właściwości selektora CSS z JavaScriptu

Dziękuję bardzo!

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

Źródło

2009-06-26 Anonymous

Proponuję przyjrzeć jQuery a niektóre z tych stanowisk w Learning jQuery, sprawi, że robi takie rzeczy bardzo proste.

Źródło

2009-06-26 10:17:00 Tom

np. $ ('# myStyle'). css ("nieprzezroczystość", "0.8") – Fermin

Podczas gdy ja jestem zadowolony z użycia jQuery lub cokolwiek innego wykonam zadanie, chciałbym zrozumieć, jaka jest koncepcja, że jestem brakuje, co wyjaśnia zachowanie, które widzę. Być może mógłbyś mi powiedzieć jakie konkretne obszary HTML/CSS/Javascript powinienem badać? –

jQuery jest fajny, ale to tylko abstrakcja funkcji wyjaśnia feniks w jego odpowiedzi. – Boldewyn

Krycie powinno być liczbą, a nie wartością logiczną. Czy działa w każdym innym browseR?

Źródło

2009-06-26 10:17:25 Fermin

Ach, przepraszam, byłem niejasny. Spodziewam się wartości float/number podczas próby uzyskania dostępu do właściwości nieprzezroczystości, ale nie wydaje się, że wartość istnieje. Na przykład: , jeśli (! Document.getElementById ('myStyle'). Style.opacity) alert ('Aw oh!'); Ten kod zawsze wyświetla alert w Safari i Firefox. Przypuszczam, że brakuje tu jakiejś podstawowej koncepcji, po prostu nie jestem pewien, co to jest i co mogę zrobić, aby uzyskać dostęp do właściwości "nieprzezroczystości". Dzięki za odpowiedź! –

ten link help

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

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

krycie jest dla Mozilli i Safari, filtru Explorer. wartości mieszczą się w zakresie od 0 do 10.

Źródło

2009-06-26 10:20:04

Możesz uzyskać wartości ustawione przez klasę dopiero po ich obliczeniu.

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

Źródło

2009-06-26 10:27:40 rahul

Reguła komentarzy! currentStyle obsługuje sposób IE, getComputedStyle() jest obsługiwany przez kogokolwiek innego. document.defaultView to sposób na uzyskanie "okna" odpowiedzialnego za renderowanie dokumentu. Nawiasem mówiąc, '-moz-opacity' nie będzie już działać (od FF 2, w Opera i WebKit nigdy tego nie robił). – Boldewyn

... powinienem użyć prostego "krycia" zamiast "-moz-opacity". – Boldewyn

Ale przezroczystość FF nie jest stosowana. – rahul

Problemem jest to, że element.style.opacitytylko przechowuje wartości, które są ustawione wewnątrz atrybutu elementu style. Jeśli chcesz uzyskać dostęp do wartości stylu, które pochodzą z innych arkuszy stylów, spójrz na quirksmode.

Pozdrowienia,

Źródło

2009-06-26 10:28:55 Boldewyn

ah tak, lub podejmij podejście feniksa. – Boldewyn

Ah ha! Dziękuję bardzo za link i wyjaśnienie. Teraz jest bardzo jasne. –

Nie dotyczy to jednak tylko krycia, ale każdej innej właściwości stylu. Spróbuj dodać "kolor: czerwony"; do arkusza stylów i alertu (document.getElementById ("myStyle"). style.color) do obsługi zdarzenia. – Boldewyn

Nie można uzyskać dostępu do właściwości selektora CSS z JavaScriptu

Odpowiedz

Powiązane problemy