Changing Background and Text Color of HTML Elements

JavaScript FAQ | JavaScript Colors FAQ  

Question: Can I programmatically change the color of an HTML element from JavaScript?

Answer: Yes, it's possible to set or read the background and text colors of individual HTML elements such as

<A>
,
<DIV>
,
<SPAN>
, and others. To change the background color for a specific HTML element on the page, set the property
element.style.backgroundColor
to the desired color value. Similarly, to change the text color (or foreground color), use the property
element.style.color
.

Modern browsers accept

color
and
backgroundColor
values in any of these formats:
'red'
,
'blue'
,
'purple'
,
'navy'
)
rgb(Rvalue,Gvalue,Bvalue)
-
for example,
rgb(255,0,0)
for red
  • hexadecimal color string
#RRGGBB
(e.g.
'#FF0000'
for red,
'#0000FF'
for blue,
'#FFFFFF'
for white)

The following demo allows you to change the colors for the highlighted

<SPAN>
elements (Element 1 and Element 2). Click on the hyperlink red, navy, purple, etc.
-
and the
<SPAN>
elements will be programmatically changed to the color you clicked.
 Element 1  Change the background color to any of the following: 
maroon peru red rgb(255,255,0) lime aqua #BBBBDD teal navy purple

 Element 2  Change the foreground color to any of the following: 
maroon peru red rgb(255,255,0) lime aqua #BBBBDD teal navy purple

This demo uses the functions

setBgColorById
and
setColorById
for changing the background and text color of any given HTML element, as specified by the input arguments
id
(the element ID) and
sColor
(the desired color):
function setBgColorById(id,sColor) {
 var elem;
 if (document.getElementById) {
  if (elem=document.getElementById(id)) {
   if (elem.style) {
    elem.style.backgroundColor=sColor;
    return 1;  // success
   }
  }
 }
 return 0;  // failure
}

function setColorById(id,sColor) {
 var elem;
 if (document.getElementById) {
  if (elem=document.getElementById(id)) {
   if (elem.style) {
    elem.style.color=sColor;
    return 1;  // success
   }
  }
 }
 return 0;  // failure
}
To read the current background color of an HTML element, given the element ID, you can use the function
getBgColorById(id)
:
function getBgColorById(id) {
 var elem;
 if (document.getElementById) {
  if (elem=document.getElementById(id)) {
   if (elem.style) return ''+elem.style.backgroundColor;
  }
 }
 return 'undefined';
}
Interestingly, the returned color format may depend on the browser. For example, Firefox returns
'rgb(187, 187, 221)'
even when the color was set to
'#BBBBDD'
. Internet Explorer does it the other way round: IE returns
'#bbbbdd'
even if the color was set to
'rgb(187, 187, 221)'
. You can always use the Hex-to-RGB and RGB-to-Hex converters to switch between these two equivalent color formats.

See also:

 

Copyright © 1996-2018, JavascriptFAQ.net.