4

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

为什么在css中定义时在js中访问时不透明度未定义？

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

编辑缺少 [] 是我从源代码复制到小提琴时创建的错字。样式/不透明度问题仍然存在于原始代码中，这在这方面是正确的。

4

4 回答 4

7

title.style.opacity

应该：

title[0].style.opacity

因为 getElementsByTagName 返回一个节点列表。

编辑：

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

window.getComputedStyle(title[0]).opacity

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

演示：http: //jsfiddle.net/f2ne6/12/

于 2012-09-07T20:18:02.890 回答
3

有两个原因：

  1. getElementsByTagName()返回元素列表，而不是单个元素getElementById()。因此，您需要对结果进行下标NodeList以获得所需的 DOM 元素；
  2. 最重要的是，当您通过style元素的属性访问样式时，您只会获得内联样式，而不是您通过CSS 类指定的样式。

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

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

演示。

不幸的是，在 IE < 9getComputedStyle中不可用，但您可以轻松找到一个 polyfill，例如这个。

于 2012-09-07T20:26:39.647 回答
1

这是因为 HTML 元素（在 DOM 中）的 style 属性不包含计算的样式，它包含元素的立即定义的样式。考虑以下 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<9 中可能有办法做到这一点。无论在何处定义，计算的样式都将返回不透明度。请参阅此处的更新示例getComputedStyle()：

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

于 2012-09-07T20:27:19.863 回答
0

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/

于 2012-09-07T20:26:42.463 回答