This is the HTML

<p>texjksdgfjl sdjfg sjdfg</p>
<p>&nbsp;</p>
<p>texjksdgfjl sdjfg sjdfg</p>
<p>&nbsp;</p>
<p>texjksdgfjl sdjfg sjdfg</p>

This is the JavaScript

var d = document.getElementsByTagName("p"); 

for (var i=0;i<d.length;i++)
{ 
    var text = d[i].textContent;

    if (text.length===1){
        d[i].style.background ='blue';
    }
    else {
        d[i].setAttribute("backgroundColor", "red");
    }
}

(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 < p > & nbsp; < /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.

Here is the test fiddle: enter link description here

This is the HTML

<p>texjksdgfjl sdjfg sjdfg</p>
<p>&nbsp;</p>
<p>texjksdgfjl sdjfg sjdfg</p>
<p>&nbsp;</p>
<p>texjksdgfjl sdjfg sjdfg</p>

This is the JavaScript

var d = document.getElementsByTagName("p"); 

for (var i=0;i<d.length;i++)
{ 
    var text = d[i].textContent;

    if (text.length===1){
        d[i].style.background ='blue';
    }
    else {
        d[i].setAttribute("backgroundColor", "red");
    }
}

(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 < p > & nbsp; < /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.

Here is the test fiddle: enter link description here

• javascript

• I change it in the fiddle : d[i].setAttribute("style", "background-color:red"); – JoDev Commented Mar 8, 2013 at 13:49

5 Answers 5

Well, the setAttribute function doesn't do what you think it does.

If you inspect the elements in your jsfiddle, you see this:

... <p backgroundcolor="red" ...>

and this is definitely not what you want. What you want is something like this:

setAttribute("style", "background-color: red;");

so it will transform into

... <p style="background-color: red;" ...>

backgroundColor isn't an attribute on HTML elements. You can use bgcolor, but its really better to do this with CSS.

You can add a class to the node like this:

d[i].className += " myClass";

and then set a CSS rule

.myClass
{
  backgroundColor: "red"

}

Or if you insist on hardwiring it to the DOM you can use

d[i].style.backgroundColor =  "red"

Use:

d[i].style.setProperty("background", "red");

Instead of

d[i].setAttribute("backgroundColor", "red");

Assming Page instead of your element, you can read the below tutorial to change the background via javascript:

http://codeforbrowser.com/blog/changing-background-color-using-javascript-and-jquery/

<script type="text/javascript">
        function changebackground() {
            var colors = ["#0099cc","#c0c0c0","#587b2e",
"#990000","#000000","#1C8200","#987baa","#464646",
"#AA8971","#1987FC","#99081E"];

            setInterval(function() {
                var bodybgarrayno = Math.floor(Math.random() * colors.length);
                var selectedcolor = colors[bodybgarrayno];
                document.body.style.background = selectedcolor;
            }, 3000);
        }
        </script>

You must do that:

var d = document.getElementsByTagName("p"); 

for (var i=0;i<d.length;i++)
{ 
    var text = d[i].textContent;

    if (text.length===1){
        d[i].style.background ='blue';
    }
    else {
        d[i].style.background ='red';
    }
}

or

var d = document.getElementsByTagName("p"); 

for (var i=0;i<d.length;i++)
{ 
    var text = d[i].textContent;

    if (text.length===1){
        d[i].style.background ='blue';
    }
    else {
        d[i].setAttribute("style", "background-color:red;");
    }
}

http://jsfiddle.net/3Lze5/6/