“forEach”函数中“this”的样式

Question

我正在尝试为自己构建一个小工具，以便在我即将进行的项目中使用，但我遇到了一个小问题。

当我出于某种原因在 forEach 函数中添加样式时，它没有成功！

所以这里'我的代码看起来如何：

<p data-att1="30">1</p>
<p data-att1="30">2</p>
<p data-att3="30">3</p>
<p data-att3="30">4</p>



let dataAttr = "[data-att1], [data-att2], [data-att3]";
let dataMain = document.querySelectorAll(dataAttr);
let p = "px";

const mainFn = () => {
  dataMain.forEach(function () {
    this.style.marginBottom = document.querySelector('[data-att1]').getAttribute('data-att1') + p;
    this.style.marginTop = document.querySelector('[data-att3]').getAttribute('data-att3') + p;
  });
};

Answer 1

您没有在正确的this 范围内工作。而是使用 el 作为元素参数并引用该范围。

let dataAttr = "[data-att1], [data-att2], [data-att3]";
let dataMain = document.querySelectorAll(dataAttr);
let p = "px";

const mainFn = () => {
  dataMain.forEach(function (el) {
    el.style.marginBottom = document.querySelector('[data-att1]').getAttribute('data-att1') + p;
    el.style.marginTop = document.querySelector('[data-att3]').getAttribute('data-att3') + p;
  });
};