Aquileo | HTML DOM Style color Property

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>

Output:

Supported Browsers: The browser supported by DOM Style color property are listed below:

Google Chrome 1 and above
Edge 12 and above
Internet Explorer 3 and above
Firefox 1 and above
Opera 3.5 and above
Apple Safari 1 and above

HTML DOM Style color Property

Explore