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
#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
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)''#BBBBDD'.
Internet Explorer does it the other way round: IE returns '#bbbbdd'
even if the color was set to 'rgb(187, 187, 221)'.
See also:
|
|
|
