Javascript “的样式设置”；这"；“内部”；forEach“；功能

我正试图为我自己建立一个小工具，以便在我即将到来的项目中使用，但我遇到了一个小问题

由于某种原因，我在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;
  });
};

1
2
3
4
让dataAttr=“[data-att1]、[data-att2]、[data-att3]”；
让dataMain=document.queryselectoral（dataAttr）；
设p=“px”；
常量mainFn=（）=>{
dataMain.forEach（函数（）{
this.style.marginBottom=document.querySelector（'data-att1'））.getAttribute（'data-att1'）+p；
this.style.marginTop=document.querySelector（'data-att3'））.getAttribute（'data-att3'）+p；
});
};

您没有在正确的

范围内工作。而是使用
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;
  });
};

在只为所有选定元素提供第一个样式属性（边距底部）之前尝试过。请将data-att2更改为>data-att1（键入错误）@K_LUN您到底想要实现什么？看起来你想要的是一些不同于所问问题的东西