Javascript Reference - HTML DOM Style color Property

The color property sets or gets the tex color.

Browser Support


`color`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the color property:

var v = object.style.color

Set the color property:

object.style.color='color|initial|inherit'

Property Values

Value	Description
color	Set the text color.
inherit	Inherit the color from the parent element

Technical Details

Default Value:	not specified
Return Value:	A string representing the text color
CSS Version	CSS1

Example

The following code shows how to set the text-color for different elements:


<!DOCTYPE html>
<html>
<body>
<!--from w w w. j a va  2 s . c o  m-->
<h2 id="myH2">This is an example h2</h2>
<p id="myP">This is an example paragraph.</p>
<p id="myP2">This is also an example paragraph.</p>
<div id="myDiv">This is an example div.</div>
<br>

<button type="button" onclick="myFunction()">Set text color</button>

<script>
function myFunction() {
    document.getElementById("myH2").style.color = "#ff0000";
    document.getElementById("myP").style.color = "red";
    document.getElementById("myP2").style.color = "blue";
    document.getElementById("myDiv").style.color = "lightblue";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the text color.


<!DOCTYPE html>
<html>
<body>
<!--   w w w .j  a  va 2s .c om-->
<p id="myP" style="color:red;">This is an example paragraph.</p>

<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.getElementById("myP").style.color);
}
</script>

</body>
</html>

The code above is rendered as follows: