Стилизация "this" внутри функции "forEach"

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;
  });
};