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

opacity and style undefined when accesing element in js but defined in css

本文关键字：未定义 但在 css 定义 样式 不透明度 访问 js 元素      更新时间：2023-09-26

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

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

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

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

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-美国&redirectslug=DOM%3window.getComputedStyle

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

有两个原因：

  1. getElementsByTagName()返回元素列表，而不是像getElementById()那样返回单个元素。因此，您需要为生成的NodeList加下标，以获得所需的DOM元素
  2. 最重要的是，当您通过元素的style属性访问样式时，您将只获得inline样式，而不是通过CSS类分配的样式

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

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

演示。

不幸的是，getComputedStyle在IE<9，但你可以很容易地找到一个polyfill，比如这个。

这是因为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<9.无论在哪里定义，计算样式都将返回不透明度。请在此处查看getComputedStyle()的更新示例：

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

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/

相关文章：