title: javascript change element background
body: <p>This is the HTML</p>
  
  <pre><code>&lt;p&gt;texjksdgfjl sdjfg sjdfg&lt;/p&gt;
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  &lt;p&gt;texjksdgfjl sdjfg sjdfg&lt;/p&gt;
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  &lt;p&gt;texjksdgfjl sdjfg sjdfg&lt;/p&gt;
  </code></pre>
  
  <p>This is the JavaScript</p>
  
  <pre><code>var d = document.getElementsByTagName("p"); 
  
  for (var i=0;i&lt;d.length;i++)
  { 
      var text = d[i].textContent;
  
      if (text.length===1){
          d[i].style.background ='blue';
      }
      else {
          d[i].setAttribute("backgroundColor", "red");
      }
  }
  </code></pre>
  
  <p>(Obviously) I can do what I want to do - different background for p elements that contain some text as opposed to p elements which are generated as &lt; p > &amp; nbsp; &lt; /p ></p>
  
  <p>But why doesn't the setAttribute work?
  I must be missing something very simple, but for the life of me I cannot imagine what it is.
  Pure JS please, no jQuery, no MooTools, no other library.</p>
  
  <p>Here is the test fiddle: <a href="http://jsfiddle.net/flish/3Lze5/" rel="nofollow">enter link description here</a></p>