javascript - 通过循环数组设置 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);
    }
}