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"

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

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>DOM Style color Porperty</title>
</head>
  
<body style="text-align:center">
  
    <h1 id="geeks1">GeeksforGeeks</h1>
    <h2 id="geeks2">DOM Style color Porperty</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>  

chevron_right


Output:

Example: 2

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.