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并在HTML中将id="elem-container"更改为class="elem-container"，我得不到任何结果，只是空格？

以下是带有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

你可以简单地选择数组的第一个元素并且它可以工作 - 但是有其他缺点（例如，你不知道是否有任何元素，或者是否有多个元素，你选择正确的元素）。 / p>

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

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

Answer 2

getElementsByClassName返回一个元素数组，因此要使其工作，您必须使用数组中的元素位置：elem[0]。

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

javascript无法获得类

2 个答案: