CSS Background Color in Javascript

Question

How can I set the CSS background color of a HTML element via JavaScript?

Answer 1

                    var element = document.getElementById('element');
element.style.background = '#ff00aa';

                  

Answer 2

In general, CSS properties are converted to JavaScript by making them camelCase without any dashes. So "background-color" becomes "backgroundColor".

function setColor(element, color)
{
    element.style.backgroundColor = color;
}

Answer 3

Or, using a little jQuery:

$('#fieldID').css('background-color', '#FF6600');

Answer 4

You might find your code is more maintainable if you keep all your styles, etc. in CSS and just set / unset class names in JavaScript.

Your CSS would obviously be something like:

.highlight { background:#ff00aa; }

Then in JavaScript:

element.className = (element.className === 'highlight' ? '' : 'highlight');