getComputedStyle无法执行

时间:2016-02-14 15:52:15

标签: javascript getcomputedstyle

我有这么简单的代码:

<input type="checkbox" ng-model="checkboxModel">
<input type="text" ng-model="dateReturned"><br/>
{{dateReturned}}

它返回以下错误消息:

  

未捕获的TypeError:无法执行&#39; getComputedStyle&#39; on&#39; Window&#39;:   参数1的类型不是&#39;元素&#39;。

我不知道我在这里做错了什么。有人可以帮忙吗?

1 个答案:

答案 0 :(得分:3)

错误消息告诉您确切的错误:recipes不是元素(它是元素集合)。

如果您想要与第一个配方元素相关联的样式,请添加[0]

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

...使用querySelector,它将返回与给定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);
    // ...
}