javascript中的多元素样式

不久前，我使用jQuery创建了一个小库，用于间距（边距和填充）

现在，我正试图在您的帮助下将此库切换为纯Javascript:）

以下是我的js代码：

//有用的变量
设dataAttr=“[data-m]、[data-mt]、[data-mr]、[data-mb]、[data-ml]、[data-my]、[data-mx]、[data-p]、[data-pt]、[data-pr]、[data-pb]、[data-pl]、[data-py]、[data-px]”；
让dataspace=$（“[数据间距]”）.find（dataAttr）；
设p=“px”；
//边际
常量marginspace=（）=>{
dataspace.each（函数（）{
$（this.css）({
“保证金”：美元（本）.attr（“数据-m”）+p，
“利润率顶部”：美元（此）.attr（“数据mt”）+p，
“保证金权利”：美元（本）.attr（“数据mr”）+p，
“保证金底部”：美元（此）.attr（“数据mb”）+p，
'左边距'：$（此）.attr（“数据ml”）+p，
});
});
};marginspace（）

文本
文本
文本
文本

就是这样：

让dataAttr=“[data-m]、[data-mt]、[data-mr]、[data-mb]、[data-ml]、[data-my]、[data-mx]、[data-p]、[data-pt]、[data-pr]、[data-pb]、[data-pl]、[data-py]、[data-px]”；
让dataspace=[…document.querySelectorAll（'[数据间距]）].map（el=>el.querySelectorAll（dataAttr））；
dataspace.forEach（dataspacedataels=>{
dataSpacingDataEls.forEach（el=>{
el.style.margin=el.dataset.m；
el.style.marginTop=el.dataset.mt；
el.style.marginRight=el.dataset.mr；
el.style.marginBottom=el.dataset.mb；
el.style.marginLeft=el.dataset.ml；
})
})

好的，多亏了上面的“connexo”代码，问题已经解决了

但是我已经编辑了代码，使之与我的代码等效

下面是我的代码现在的样子：

let dataAttr = "[data-m], [data-mt], [data-mr], [data-mb], [data-ml], [data-my], [data-mx], [data-p], [data-pt], [data-pr], [data-pb], [data-pl], [data-py], [data-px]";
let dataSpacing = [...document.querySelectorAll('[data-spacing]')].map(el => el.querySelectorAll(dataAttr));
let p = "px";

dataSpacing.forEach(dataSpacingDataEls => {
  dataSpacingDataEls.forEach(el => {
    el.style.margin = el.dataset.m + p;
    el.style.marginTop = el.dataset.mt + p;
    el.style.marginRight = el.dataset.mr + p;
    el.style.marginBottom = el.dataset.mb + p;
    el.style.marginLeft = el.dataset.ml + p;
  })
})

---

感谢@connexo，再次感谢：）。

请在JS FIDLE中添加一些HTML，这样我们至少可以调试以帮助您。请不要将代码放在外部网站上。StackOverflow具有强大的代码段功能。始终在您的问题中正确填写所有相关内容。@connexo我已更新了代码并删除了外部链接。遗憾的是，它没有向元素返回任何样式！谢谢@connexo，我已经通过编辑一些代码来满足我的要求，修复了它。你不需要执行

getAttribute

。这一切都在元素的

数据集中

。谢谢，再次修复了它。我只需要添加具有“px”字符串的p变量。还要注意，这将应用任何数据属性，无论是否存在，这可能不是您想要的。