title: Setting the value for setAttribute by looping through an array
body: <p>I'm quite new to JavaScript and want to set the attribute of an element with the use of a loop and variables. Run the example below <a href="http://js.do/code/arraysetattrib" rel="nofollow noreferrer">here</a>.</p>
  
  <pre><code>&lt;h1 id="header"&gt;START&lt;/h1&gt;
  
  &lt;button onclick="run()"&gt;run&lt;/button&gt;
  
  &lt;script&gt;
    function run()
    {
      var s, myStringArray = ["red", "blue"];
      for (s of myStringArray)
      {
        document.getElementById("header").setAttribute("style","color:"+s);
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>This works, but I'd like to have an array with variables containing the complete value for <code>setAttribute</code>.</p>
  
  <p>For instance:</p>
  
  <pre><code>attribArray = [""style","color:red"", ""style","color:blue""]
  </code></pre>
  
  <p>This is a hypothetical question and the exemplary code doesn't make much sense.</p>
  
  <p>How would I create such an array, so that I can loop through it and use the variable as above, directly in<code>document.getElementById("header").setAttribute(theVar)</code>?</p>