无法从 Javascript 访问 CSS 选择器的属性答案

【问题标题】：Can't Access CSS Selector's Properties from Javascript无法从 Javascript 访问 CSS 选择器的属性
【发布时间】：2010-11-06 02:35:21
【问题描述】：

这是一个非常基本的问题：为什么下面代码中的 finishLoading() 函数无法访问 #myStyle CSS 选择器的 'opacity' 属性？警报不显示任何内容，并且我已验证“不透明度”属性为“假”。

非常感谢！

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

【问题讨论】：

标签： javascript html css

【解决方案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 );

【讨论】：

评论规则！ currentStyle 处理 IE 的方式，其他任何人都支持 getComputedStyle()。 document.defaultView 是一种获取负责呈现文档的window 的方法。顺便说一句，-moz-opacity 将不再起作用（从 FF 2 开始，在 Opera 和 WebKit 中它从未起作用）。
... 使用简单的 'opacity' 而不是 '-moz-opacity'，我应该添加。
但我没有应用 FF 不透明度。
我会推荐阅读这篇很棒的文章：erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291，关于使用此功能可能会出现的一般问题。

【解决方案2】：

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

干杯，

【讨论】：

嗯，是的，或者采取凤凰的方式。
啊哈！非常感谢您的链接和解释。现在很清楚了。
然而，这不仅适用于 opacity，而且适用于所有其他样式属性。尝试添加“颜色：红色；”到你的样式表和 alert(document.getElementById('myStyle').style.color) 到你的事件处理程序。

【解决方案3】：

我建议你看看jQuery 和Learning jQuery 上的一些帖子，它会让做这样的事情变得很容易。

【讨论】：

例如$('#myStyle').css("不透明度","0.8")
虽然我很高兴使用 jQuery 或任何其他可以完成工作的东西，但我想了解我缺少什么概念来解释我所看到的行为。或许您能告诉我应该研究哪些特定领域的 HTML/CSS/Javascript？
jQuery 很酷，但它只是 phoenix 在他的回答中解释的函数的抽象。

【解决方案4】：

不透明度应该是一个数字而不是布尔值。它可以在任何其他浏览器中工作吗？

【讨论】：

啊，对不起，我不清楚。尝试访问 opacity 属性时，我希望得到一个浮点数/数字，但该值似乎不存在。例如： if (!document.getElementById('myStyle').style.opacity) alert('Aw oh!');此代码始终在 Safari 和 Firefox 中显示警报。我想我在这里遗漏了一些基本概念，我只是不确定它是什么或者我可以做些什么来访问“不透明度”属性。感谢您的回复！

【解决方案5】：

此链接帮助

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

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

opacity 用于 Mozilla 和 Safari，过滤器用于 Explorer。取值范围为 0 到 10。

【讨论】：