javascript无法获取类的计算样式

我有一个简单的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>  

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

document.getElementsByClassName

所以我的变量看起来像

var elem=document.getElementsByClassName（“elem容器”）

我将CSS中的
#elem container
更改为
.elem container
，并将HTML中的
id=“elem container”
更改为
class=“elem container”
，但我没有得到任何结果，只是空白

下面是使用ID的工作示例

下面是一个不工作的例子
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

---

您可以简单地选择数组的第一个元素，它会起作用，但也有其他缺点（例如，您不知道是否有任何元素或是否有多个元素，您选择的是正确的元素）

---

允许DOM中具有相同

类

-名称的多个元素<代码>Id-名称应唯一。这就是为什么这些选择器返回单个元素（“应该是唯一的”）或数组（“预期为0-n个元素”）。

getElementsByClassName

返回一个元素数组，因此要使其工作，必须使用数组中的元素位置：

elem[0]

var background = window.getComputedStyle(elem[0],null).getPropertyValue("background-color");

---

你能告诉我更多关于缺点的信息吗？它们是否足够相关而不使用..byClassName？非常感谢你的解释和帮助！谢谢你的回答！

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

var background = window.getComputedStyle(elem[0],null).getPropertyValue("background-color");