Question

在下面的示例中，我有一个名为color()的函数。是否有可能让它像我期望的那样工作？

<div> text text </div>

<script>
function color(property) {
    return this.style.color = property;
}

document.getElementsByTagName("div").color("red"); 
</script>

上面的代码给出了错误：

color(...) is not a function

Answer 1

该代码存在两个问题和问题：

getElementsByTagName会返回元素的集合，而不仅仅是单个元素。 More here
没有任何内容可以将函数color附加到元素或元素集合中。
要使用this作为元素，您需要确保以特殊方式调用color。

另请注意，return中不需要color。

如果要将color函数应用于所有匹配元素，则需要循环：

function color(property) {
    this.style.color = property;
}

var list = document.getElementsByTagName("div");
for (var i = 0; i < list.length; ++i) {
  color.call(list[i], "red"); 
}

<div> text text </div>

但如果您不使用this，则通话更清晰：

function color(el, property) {
    el.style.color = property;
}

var list = document.getElementsByTagName("div");
for (var i = 0; i < list.length; ++i) {
  color(list[i], "red"); 
}

<div> text text </div>

注意：您可以向HTMLElement原型（甚至是NodeList或HTMLCollection）添加属性，因此您可以将color称为一种方法，就像你在问题中所做的那样。这可能不是一个好主意;如果每个人都这样做，很快就会导致冲突。通常，最好只在应用polyfill时修改内置DOM原型，而不是自定义函数。

在函数内部设置属性，并在Element get之后调用它

1 个答案: