Question

用这个小提琴http://jsfiddle.net/mungbeans/f2ne6/2/

为什么在js中访问时，在css？

中定义的不透明度是未定义的

我认为答案是因为样式也是未定义的，为什么样式需要在定义不透明度之前明确地添加样式？

EDIT 缺少[]是一个拼写错误，因为我从源头复制到小提琴。样式/不透明度问题仍然存在于原始代码中，这在该方面是正确的。

Answer 1

title.style.opacity

应该是：

title[0].style.opacity

因为getElementsByTagName返回一个nodeList。

编辑：

这仍然没有得到价值。您需要执行以下操作：

window.getComputedStyle(title[0]).opacity

https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle?redirectlocale=en-US&redirectslug=DOM%3Awindow.getComputedStyle

DEMO：http://jsfiddle.net/f2ne6/12/

Answer 2

有两个原因：

getElementsByTagName()返回元素列表，而不是单个元素getElementById()。因此，您需要下标结果NodeList以获取所需的DOM元素;
最重要的是，当您通过元素的style属性访问样式时，您只会获得内嵌样式， < em> not 您通过 CSS类分配的那些。

要获取计算样式，您可以使用 window.getComputedStyle() ，它将为您提供 all 的最终使用值元素的CSS属性：

alert(window.getComputedStyle(title).opacity);

<强> DEMO

不幸的是，IE中的getComputedStyle不是available＆lt; 9，但您可以轻松找到填充物，例如this一个。

Answer 3

这是因为HTML元素的样式属性（在DOM中）不包含计算样式，它包含元素的立即定义样式。请考虑以下HTML：

<div id="one" style="width: 50px;"></div>

如果您致电document.getElementById("one").style.width，您将获得"50px"。但是，如果删除style属性，而是使用CSS将div设置为宽度为50像素，则会返回""。你可以在这里看到这个：

http://jsfiddle.net/aAbJY/

您可能正在寻找计算样式，可以使用getComputedStyle()在大多数浏览器中获取。它直到IE9才在IE中运行，尽管在IE＆lt; 9中可能有一种方法可以做到这一点。计算出的样式将返回不透明度，无论它在何处定义。在此处查看getComputedStyle()的更新示例：

http://jsfiddle.net/aAbJY/1/

Answer 4

Chase是正确的，但代码中还有另一个问题。 style属性仅包含使用元素的style属性设置的样式，因此Chase的解决方案只能解决问题的一半。您要做的是使用getComputedStyle()函数来获取元素的运行时样式：

 function test(id) {
     var listElement = document.getElementById(id);
     var titles = listElement.getElementsByTagName("div");
     var style = getComputedStyle(titles[0]);
     alert( "Opacity: " + style.opacity );
 }

在此处查看我更新的jsfiddle：http://jsfiddle.net/7vQ4A/1/

访问js中的元素但在css中定义时，不透明度和样式未定义

4 个答案: