Question

我正在开发一个创建多个元素并将它们附加到DOM的JS类，我希望该类还可以设置这些元素的样式属性。我有一个函数已经为其他属性执行此操作：

function setAttrs(el, attrValArray){
    for(var i=0; i<attrValArray.length;i++){
        el.setAttribute(attrValArray[i][0],attrValArray[i][1]);
    }
}

attrValArray输入是一个类似于

的2D数组

attrValArray = [["class","container"],["id","cc1]];

所以我想要的是能够为样式属性对创建类似的数组，例如：

propValArray = [["display","inline-block"],["position","relative"]];

然后我将传递给类似的setStyles函数。

我可以使用相同的setAttribute方法，但不是循环遍历数组并单独设置属性，我必须构造一个长字符串并将整个事物作为setAttribute的第二个参数传递我实际上只设置了1个属性的许多属性。但是我想避免这种情况，因为它会覆盖任何现有的内联样式（不是我使用内联样式，而是为了原理）。

更好的选择是在元素上设置style的属性。即。

el.style.<property-to-set> = "property value";

这不会覆盖除设置的特定属性之外的任何内容。但我没有看到任何方法使用列表中的值选择“属性到集”。是否有适当的解决方法？

要清楚，我已经知道我可以简单地将所需的样式属性分配给要创建的元素类/ ID，并且实际上想知道基于“良好实践”这是否是技术上正确的事情等等。如果没有令人满意的替代方案，那就是我打算做的事情。

此外，正如问题中所述，我对纯JS解决方案，没有JQuery或任何其他此类库/框架非常感兴趣。

Answer 1

我没有看到任何方法使用列表中的值选择“属性设置”。

除非我误解了这个问题，否则你会以完全相同的方式做到这一点：

function setStyles(el, cssArray){
  for(var i=0; i<cssArray.length;i++){
    el.style[cssArray[i][0]] = cssArray[i][1];
  }
}

请记住使用对象，您可以使用点表示法object.property或括号表示法object['property']来访问属性。当您使用括号表示法时，括号内的文本将被评估，就像在数组中查找索引一样（数组实际上只是具有数字属性的特殊对象）。

或者，您可以在所有属性/值对中构建一个长字符串，并使用setAttribute或cssText：

function setStyles(el, cssArray){
  let cssText = '';
  for(var i=0; i<attrValArray.length;i++){
    cssText += cssArray[i][0] + ':' + cssArray[i][1] + ';';
  }
  el.style.cssText = cssText;
  // or el.setAttribute('style', cssText);
}

Javascript（纯）：使用数组中的值列表设置许多样式属性

1 个答案: