Style colorProperty
Style Object
Definition and Usage
The color property sets or returns the color of the text.
Syntax
Set the color property:
Object.style.color="color|inherit"
Return the color property:
Object.style.color
| Value | Description |
|---|---|
| color | Specifies the color of the text. SeeCSS Color Valuesfor a complete list of possible color values. |
| inherit | The value of the color property is inherited from the parent element. |
Browser Support
All major browsers support the color property.
Note:IE7 and earlier versions do not support the "inherit" value. IE8 only supports "inherit" if a !DOCTYPE is specified. IE9 supports "inherit".
Example
Example
Change the color of text:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial(example.com)</title>
<script>
function displayResult(){
document.getElementById("p1").style.color="#ff0000";
document.getElementById("p2").style.color="magenta";
}
</script>
</head>
<body>
<p id="p1">This is a sample paragraph.</p>
<p id="p2">This is also a sample paragraph.</p>
<br>
<input type="button" onclick="displayResult()" value="Change text color">
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial(example.com)</title>
<script>
function displayResult(){
document.getElementById("p1").style.color="#ff0000";
document.getElementById("p2").style.color="magenta";
}
</script>
</head>
<body>
<p id="p1">This is a sample paragraph.</p>
<p id="p2">This is also a sample paragraph.</p>
<br>
<input type="button" onclick="displayResult()" value="Change text color">
</body>
</html>
Try it Yourself »
Style Object Other Extensions