Question

这是一个非常基本的问题：为什么下面代码中的finishLoading（）函数无法访问#myStyle CSS选择器的'opacity'属性？警报不会显示任何内容，我已经确认“不透明度”属性为“false”。

非常感谢！

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

Answer 1

只有在计算完成后才能获得通过类设置的值。

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

Answer 2

问题是，element.style.opacity 仅存储在元素的style属性中设置的值。如果您想访问来自其他样式表的样式值，请查看quirksmode。

干杯，

Answer 3

我建议您查看jQuery和Learning jQuery上的一些帖子，它会让这样的事情变得非常简单。

Answer 4

不透明度应该是数字而不是布尔值。它可以在任何其他browseR中使用吗？

Answer 5

此链接帮助

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

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

不透明度适用于Mozilla和Safari，可过滤资源管理器。值的范围是0到10.

无法从Javascript访问CSS Selector的属性

5 个答案: