通过循环遍历数组来设置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>

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

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);
    }
}