从另一个对象数组向数组元素添加样式

在JavaScript中，如果你想从一个对象数组向另一个数组的元素添加样式，通常涉及到数组的遍历和对象属性的操作。以下是一个基本的示例，展示了如何实现这一功能：

// 假设我们有两个数组，一个是样式对象数组，另一个是DOM元素数组
const styles = [
  { backgroundColor: 'red', fontSize: '20px' },
  { backgroundColor: 'blue', fontSize: '24px' },
  // ...更多样式对象
];

const elements = document.querySelectorAll('.my-elements'); // 获取需要添加样式的DOM元素集合

// 确保两个数组的长度一致，或者根据实际情况进行处理
if (styles.length >= elements.length) {
  for (let i = 0; i < elements.length; i++) {
    // 遍历元素数组
    const style = styles[i]; // 获取对应的样式对象
    for (const property in style) {
      // 遍历样式对象的属性
      if (style.hasOwnProperty(property)) {
        elements[i].style[property] = style[property]; // 为元素添加样式
      }
    }
  }
} else {
  console.error('样式数组的长度小于元素数组的长度');
}

在这个例子中，我们首先定义了一个包含样式对象的数组styles，然后通过document.querySelectorAll获取了需要添加样式的DOM元素集合。接着，我们遍历元素数组，并为每个元素应用对应的样式对象中的样式。

优势：