Skip to content
Related Articles

Related Articles

HTML | DOM Style color Property
  • Last Updated : 29 Apr, 2021

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"

Property Values: 
Return Value: It returns a string value which represents a text-color of an element.
Example: 
 

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: 
                                                                           Before click on the button:



           

                                                                         After click on the button:

Example: 2 
 

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
  • Internet Explorer
  • Firefox
  • Opera
  • Apple Safari

 

My Personal Notes arrow_drop_up
Recommended Articles
Page :