通过遍历数组来设置 setAttribute 的值

Question

我对 JavaScript 很陌生，想使用循环和变量来设置元素的属性。运行下面的例子here。

<h1 id="header">START</h1>

<button onclick="run()">run</button>

<script>
  function run()
  {
    var s, myStringArray = ["red", "blue"];
    for (s of myStringArray)
    {
      document.getElementById("header").setAttribute("style","color:"+s);
    }
  }
</script>

这可行，但我想要一个包含setAttribute 完整值的变量数组。

例如：

attribArray = [""style","color:red"", ""style","color:blue""]

这是一个假设性问题，示例代码没有多大意义。

我将如何创建这样一个数组，以便我可以循环遍历它并直接在document.getElementById("header").setAttribute(theVar) 中使用上述变量？

Answer 1

您可以使用对象数组：

function run() {
  var myAttributes = [
    { attr: "style", value: "color: red" },
    { attr: "style", value: "color: blue" }
  ];

  for (var i = 0; i < myAttributes.length; i++) {
    document.getElementById("header").setAttribute(myAttributes[i].attr, myAttributes[i].value);
  }
}

<h1 id="header">START</h1>

<button onclick="run()">run</button>

现在，请记住，您的代码和此 sn-p 将两次更新同一元素的颜色，因此毫无意义。如果要循环颜色，可以执行以下操作：

let current = 0;
function run() {
  var myAttributes = [
    { attr: "style", value: "color: red" },
    { attr: "style", value: "color: blue" },
    { attr: "style", value: "color: yellow" },
    { attr: "style", value: "color: green" }
  ];
  
  document.getElementById("header").setAttribute(myAttributes[current].attr, myAttributes[current].value);
  
  current = current === (myAttributes.length - 1) ? 0 : current + 1;
}

<h1 id="header">START</h1>

<button onclick="run()">run</button>

奖励：ES6 语法

使用 ES6 语法，我们可以让它看起来更友好一些：

function run() {
    let header = document.getElementById("header");
    const myAttributes = [
        { attr: "style", value: "color: red" },
        { attr: "style", value: "color: blue" }
    ];

    for (let { attr, value } of myAttributes) {
        header.setAttribute(attr, value);
    }
}