Javascript 如何在函数中为this.setattribute传递参数？

所以我正在学习javascript（？），我遇到了这种情况，我真的找不到一个直接的答案

因此，我在html页面中有这些段落，我想更改其背景颜色，我使用的代码如下：

var colors=['red','pink','blue'];

var div2paragraphs = document.querySelectorAll('#div2 p')

for (let paragraph = 0; paragraph < div2paragraphs.length; paragraph++) {
    (function(paragraph) {
    div2paragraphs[paragraph].onmouseover = function(){
    this.setAttribute('style', `background-color: ${colors[paragraph]}`)}
    div2paragraphs[paragraph].onmouseout = function(){
    this.setAttribute('style', 'background-color: white')}
    })(paragraph);
}

或者类似的东西。我认为这与这些情况有关，如果你加上括号，它会在做其他事情之前调用函数？所以它不知道“这”是什么？我不太明白，但无论如何，我一点儿也不知道如何用单独的函数编写与上面相同的东西。有人能解释一下这个

我更习惯Python，所以很明显，有些基本概念是不同的

PS：下面这两个例子有什么不同

for (let paragraph = 0; paragraph < div2paragraphs.length; paragraph++) {
    div2paragraphs[paragraph].onmouseover = function() {
        this.style['background-color'] = colors[paragraph];
    }
    div2paragraphs[paragraph].onmouseout = function() {
        this.style['background-color'] = 'white';
    }
}

for（让段落=0；段落

还有这个

for (let paragraph = 0; paragraph < div2paragraphs.length; paragraph++) {
    div2paragraphs[paragraph].onmouseover = function(){
        this.setAttribute('style', `background-color: $(colors[paragraph]`)
    }
    div2paragraphs[paragraph].onmouseout = function(){
        this.setAttribute('style', 'background-color: white')
    }
}

for（让段落=0；段落

---

为什么第一个（由ibrahim mahrir提供）有效而第二个无效？

在第一个代码示例中，内部循环完全无用，因为您已经在使用尊重块范围的

let

，所以不会发生。下面的代码可以正常工作：

for (let paragraph = 0; paragraph < div2paragraphs.length; paragraph++) {
    div2paragraphs[paragraph].onmouseover = function() {
        this.style['background-color'] = colors[paragraph];
    };
    div2paragraphs[paragraph].onmouseout = function() {
        this.style['background-color'] = 'white';
    };
}

AAAA

BBBB

中交

在事件处理程序上分配时，必须将处理程序函数分配给占位符

div2paragraphs[paragraph].onmouseover = changeToColor('red');

此处出现

TypeError

。调用的带有参数“red”的

changeToColor

函数的结果（返回值）是一个变量。这不是一个函数。分配的处理程序必须适合原型

函数（事件e）{…}

，其中e是中定义的事件类的对象

但是，这一行是正确的，因为您正在将已定义函数的ID分配给占位符，占位符可以用作实际的处理函数

您需要做的是，重写函数changeToColor并将其ID分配给placeholer

div2paragraphs[paragraph].onmouseover = changeToColor

或者，如果要立即调用该函数，可以使用

call

或

apply

将其包装在另一个函数中，该函数引用了它所属的上下文（如果调用函数需要

this

）

div2paragraphs[paragraph].onmouseover = function () {
  changeToColor.call(this, 'red');
}

---

顺便说一句，您不需要在循环中使用内部IIFE，因为您已经在使用

let

。这涉及到块范围。有关IIFE的更多信息：因此它不知道

这是什么？是的，因为您的设置不正确。它应该是
`background color:${colors[段落]}`
而不是
`background color:$（colors[段落]`
。我的解决方案根本不使用模板文字，这就是我之前没有注意到的原因。哦，谢天谢地，这只是一个打字错误，我没有发疯。非常感谢您，先生！您好，谢谢您的回复，我实际上在您键入的最后一个示例中尝试编写了它，但它仍然给我相同的打字错误……还有“div2paragraphs”[段落].onmouseover=changeToColor”示例，如何将自定义颜色传递给函数？嗯，第一个示例的工作方式很有趣，我最初编写它的方式是（让段落=0；段落

背景色：$（colors[段落]

）}div2paragraphs[段落].onmouseout=function（）{this.setAttribute（'style'，'background color:white'）}

但仍然不起作用。这与尝试使用“setAttribute”有关吗？@user3696118不。我打赌你用了

var

而不是

let

，这就是它不起作用的原因。

var

不尊重块范围，所以需要iLife。但是

let

解决了这个问题，所以不需要iLife。不，我确实使用了

let

，正如我在评论中所写的那样，仍然不起作用。这在o中得到了回答原始的帖子评论，但这是因为我的“模板文字”写得不正确…@user3696118是的，我知道。我写了原始的帖子评论；-）

div2paragraphs[paragraph].onmouseout = changeBackWhite;

div2paragraphs[paragraph].onmouseover = changeToColor

div2paragraphs[paragraph].onmouseover = function () {
  changeToColor.call(this, 'red');
}