HTML - DOM Style Object color Property

Quiz

HTML DOM Style Object color property is used to sets or get the text color of the selected element.

Syntax

Set the color property

object.style.color= "color | initial | inherit";

Get the color property

object.style.color;

Property Values

Value	Description
color	It specifies the text color.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents text color of the element.

Example of HTML DOM Style Object 'color' Property

The following example sets the text color in three different color and gets the color names.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object color Property
    </title>
</head>
<body>
    <button onclick="green()">Green</button>
    <button onclick="red()">red</button>
    <button onclick="yellow()">Yellow</button>
    <p id="color">Welcome to Tutorials Point</p>
    <p id="info"></p>
    <br><br>
    <script>
        function green() {
            let x=document.getElementById("color")
                .style.color = "#04af2f";
            document.getElementById("info").innerHTML=x;
        }
        function red() {
            let x=document.getElementById("color")
                .style.color = "red";
            document.getElementById("info").innerHTML=x;
        }
        function yellow() {
            let x=document.getElementById("color")
                .style.color = "yellow";
            document.getElementById("info").innerHTML=x;
        }
    </script>
</body>
</html>

Supported Browsers

Property
color	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page