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="Beginner1">w3wiki</h1>
    <h2 id="Beginner2">DOM Style color Property</h2>
    <p id="Beginner3">
        w3wiki: A computer science portal
    </p>
    <button type="button" onclick="Beginner()">
        Submit
    </button>
    <script>
        function Beginner() {
            document.getElementById("Beginner1").style.color
                = "green";
            document.getElementById("Beginner2").style.color
                = "black";
            document.getElementById("Beginner3").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">
        w3wiki
    </h1>
    <h2>DOM Style color Property</h2>
    <button type="button" onclick="Beginner()">
        Submit
    </button>
    <script>
        function Beginner() {
            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

Tags:

#HTML-DOM #Web technologies #HTML #Web Technologies

HTML DOM Style borderBottom Property

HTML DOM cookie Property

HTML DOM Style color Property

html

HTML

Contact Us