HTML DOM Style color Property

Last Updated : 12 Jun, 2023

The DOM style color property is used to set or return the color of the text.

Syntax:

It is used to set the color property.

object.style.color

It is used to return the color property.

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

Return Values: It returns a string value that represents a text-color of an element.

Example: In this example, we will use DOM style color property

html

<!DOCTYPE html>
<html>
<head>
    <title>DOM Style color Property</title>
</head>
<body style="text-align:center">
    <h1 id="geeks1">GeeksforGeeks</h1>
    <h2 id="geeks2">DOM Style color Property</h2>
    <p id="geeks3">
        GeeksforGeeks: A computer science portal
    </p>
    <button type="button" onclick="geeks()">
        Submit
    </button>
    <script>
        function geeks() {
            document.getElementById("geeks1").style.color
                = "green";
            document.getElementById("geeks2").style.color
                = "black";
            document.getElementById("geeks3").style.color
                = "blue";
        }
    </script>
</body>
</html>

Output:

Example 2: In this example, we will use the DOM style color property

HTML

<!DOCTYPE html>
<html>
<head>
    <title>DOM Style color Property</title>
</head>
<body style="text-align:center">
    <h1 style="color:green;" id="gfg">
        GeeksforGeeks
    </h1>
    <h2>DOM Style color Property</h2>
    <button type="button" onclick="geeks()">
        Submit
    </button>
    <script>
        function geeks() {
            alert(document.getElementById("gfg").style.color);
        }
    </script>
</body>
</html>