title: Getting or changing CSS class property with Javascript using DOM style
body: <p>My objective is to change the background color of a columns in a table without addressing each data entry individually by Id or Name. I know there are several ways to do this, and I've tried 3 to be exact, and I'm having problems with each. For the sake of simplicity and clarity, In this question, I'm asking how to successfully do it using the <a href="http://www.w3schools.com/jsref/prop_style_backgroundcolor.asp" rel="noreferrer"> element.style.backgroundColor</a> object in the DOM. Here's my HTML:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" type="text/css" href="tester.css"&gt;
          &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="tester.js"&gt;&lt;/script&gt; 
      &lt;/head&gt;
      &lt;body&gt;
      &lt;button type="button" onClick="testerFunction()"&gt;Test&lt;/button&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;th class="col1"&gt;Column 1 Header&lt;/th&gt;
                  &lt;th class="col2"&gt;Column 2 Header&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="col1"&gt;R1 C1&lt;/td&gt;
                  &lt;td class="col2"&gt;R1 C2&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="col1"&gt;R2 C1&lt;/td&gt;
                  &lt;td class="col2"&gt;R2 C2&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
       &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>My CSS file:</p>
  
  <pre><code>.col1{
      background-color:lime;  
  }
  </code></pre>
  
  <p>And my Javascript file:</p>
  
  <pre><code>function testerFunction() {
      alert (document.getElementsByClassName('.col1').style.backgroundColor);  
  }
  </code></pre>
  
  <p>When I run it I get roughly the same error in IE, Firefox, and Chrome:</p>
  
  <blockquote>
    <p>cannot read property 'backgroundColor' of Undefined.</p>
  </blockquote>
  
  <p>I have a feeling it has something to do with the data type returned by the <a href="https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName?redirectlocale=en-US&amp;redirectslug=DOM%2Fdocument.getElementsByClassName" rel="noreferrer">document.getElementsByClassName</a> DOM object. The referenced website says it returns an HTMLcollection. Other places I've found says it returns a "list" of elements. I tried making an array and assigning the result to the array and accessing each element in the array with a loop, but got the same error at the same place. It might be that I just don't know how to handle a, "collection." At any rate, I was expecting, "lime" or the hex or rgb equivalent because that's what I defined in the CSS file. I want to be able to change it with Javascript. Any help would be much appreciated. Thanks!</p>
  
  <p>EDIT: Added arguments to Shylo Hana's Answer to make it more modular</p>
  
  <pre><code>function testerFunction() {
      changeColumnColor('col1','blue');
  }
  function changeColumnColor(column,color) {
      var cols = document.getElementsByClassName(column);
      for(i=0; i&lt;cols.length; i++) {
        cols[i].style.backgroundColor = color;
      }
  }
  </code></pre>