getComputedStyle 执行失败

Question

我有一段简单的代码：

var recipes = document.getElementsByClassName("recipes");
var recipesStyle = window.getComputedStyle(recipes, null);

它returns这个错误信息：

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

我不知道我做错了什么。有人可以帮忙吗？

Answer 1

错误消息准确地告诉您出了什么问题：recipes 不是一个元素（它是一个 元素集合 ）。

如果您想要与 first 食谱元素关联的样式，请添加 [0]:

var recipes = document.getElementsByClassName("recipes");
var recipesStyle = window.getComputedStyle(recipes[0], null);
// Here ------------------------------------------^

...使用 querySelector，这将只是 return 匹配给定 CSS 选择器的第一个元素：

var recipe = document.querySelector(".recipes");
var recipesStyle = window.getComputedStyle(recipe, null);

或者如果你想处理每个食谱元素的样式，你可以使用循环：

var recipes = document.getElementsByClassName("recipes");
for (var n = 0; n < recipies.length; ++n) {
    var thisRecipesStyle = window.getComputedStyle(recipes[n], null);
    // ...
}

getComputedStyle 执行失败

getComputedStyle failed to execute

javascript

getcomputedstyle