javascript无法获取类的计算样式

Question

我有一个简单的 javascript，它使用 DOM 中元素的 getComputedStyle 来读取其背景颜色。它将 rgb 转换为十六进制并以 html 格式输出。

Javascript:

var elem = document.getElementById("elem-container");
var background = window.getComputedStyle(elem, null).getPropertyValue("background-color");

function rgb2hex(rgb) {
     if (  rgb.search("rgb") == -1 ) {
          return rgb;
     } else {
          rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
          function hex(x) {
               return ("0" + parseInt(x).toString(16)).slice(-2);
          }
          return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 
     }
}

document.getElementById("output").innerHTML = rgb2hex(background);

HTML:

<div id="elem-container">Some content</div>
<div id="output"></div>  

CSS:

 #elem-container {
   position: absolute;
   left: 0;
   top: 200px;
   padding: 50px;
   background-color:#aaaaaa;
   font-family: Georgia;
 }

但是当我想使用 CLASS 而不是 ID 时，我会使用我在 MDN 上找到的这段代码

document.getElementsByClassName

所以我的变量看起来像 var elem = document.getElementsByClassName("elem-container");

我在 CSS 中将 #elem-container 更改为 .elem-container 并将 id="elem-container" 更改为 class="elem-container" 在 HTML 中，我没有得到任何结果，只有空白？

这是带有 ID 的工作示例 http://codepen.io/riogrande/pen/MKeqMN

这是 CLASS 的不工作示例 http://codepen.io/riogrande/pen/qbNJJx

Answer 1

document.getElementById 和 document.getElementsByClassName 的区别:

document.getElementById 返回单个元素，而 document.getElementsByClassName 返回元素数组。

var elem = document.getElementsByClassName("elem-container");
var background = window.getComputedStyle(elem, null).getPropertyValue("background-color"); 
// this will fail, because elem is an array

---

您可以简单地选择数组的第一个元素并且它会工作 - 但有其他缺点(例如，您不知道是否有任何元素或是否有多个元素，您选择正确的那个)。

var elem = document.getElementsByClassName("elem-container")[0];

允许在 DOM 中具有相同 class-name 的多个元素。 Id - 名称应该是唯一的。这就是为什么这些选择器返回单个元素(“应该是唯一的”)或一个数组(“需要 0-n 个元素”)的原因。