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

用这把小提琴

为什么不透明度在js中访问时未定义，而在css中定义了它

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

编辑

---

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

title.style.opacity

应该是：

标题[0]。样式。不透明度

因为getElementsByTagName返回一个节点列表

编辑：

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

window.getComputedStyle（标题[0]）。不透明度

演示：

有两个原因：

返回元素列表，而不是作为

getElementById（）

返回单个元素。因此，您需要为生成的

NodeList

下标，以获得所需的DOM元素

最重要的是，当您通过元素的

style

属性访问样式时，您将只获得内联的样式，而不是通过CSS类指定的样式

要获得计算的样式，可以使用，这将为您提供元素的所有CSS属性的最终使用值：

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

---

不幸的是，

getComputedStyle

不在IE<9中，但是您可以很容易地找到一个polyfill，例如一个。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 );
 }

---

请参见我在此处更新的JSFIDLE:

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

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

如果调用

document.getElementById（“one”）.style.width

，您将返回

“50px”

。但是，如果删除

style

属性，而是使用CSS将div设置为宽度为50像素，它将返回

“

。您可以在此处看到这一点：

---

您可能正在寻找computed样式，大多数浏览器都可以使用

getComputedStyle（）

获得该样式。它直到IE9才在IE中工作，不过在IE

getElementsByTagName

中可能有一种方法可以实现它。如果要访问该数组中的特定项，必须使用其索引。此外，它只能从

文档
对象中使用，而不能从DOM节点中使用。因此，答案是，“因为你做得不对”，感谢回复-有这么多好的答案可供选择，我感到内疚，因为只有一个是正确的，而他们都是好的。我将把它交给Chase，因为他是第一个，并且总是被人投票。接下来的问题是-没有setComputedStyle，在运行时更改不透明度的正确方法是什么？关于内联样式+1的解释