HTML | DOM Style outlineColor Property

The DOM Style outlineColor Property is used to sets or returns the color of the outline around an Element.

Syntax:

It is used to Return the outlineColor property

object.style.outlineColor

it is used to Set the outlineColor property

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

Property Values:

color: It sets the outline color to any valid CSS color.
invert: It set the outline color to a color which is inverse of the background, which ensures the outline will always be visible. Note: It is not supported by all browsers.
Inherit: It sets the outline color according to outline-color property inherited from its parent element.

Return Value: It returns a string value which represent the color of the ouline in an element’s.

Example-1:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM Style outlineColor Property 
    </title> 
    <style> 
        #myDiv { 
            border: 1px solid red; 
            outline: green dotted thick; 
        } 
    </style> 
</head> 
  
<body> 
    <h1> Geeks for Geeks</h1> 
    <h2>HTML | DOM Style outlineColor Property</h2> 
  
    <div id="myDiv">Welcome to Geeks for Geeks.</div> 
    <br> 
    <button type="button" onclick="myFunction()"> 
        Click Here! 
    </button> 
  
    <script> 
        function myFunction() { 
            
            //  Set outline color.  
            document.getElementById("myDiv") 
                .style.outlineColor = "red"; 
        } 
    </script> 
  
</body> 
  
</html> 

Output:

Before Clicking On Button:

After Clicking On Button:

Example-2 :

   
<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM Style outlineColor Property 
    </title> 
    <style> 
        #myDiv { 
            border: 1px solid red; 
            outline: dotted thick; 
        } 
    </style> 
</head> 
  
<body> 
    <h1> Geeks for Geeks</h1> 
    <h2>HTML | DOM Style outlineColor Property</h2> 
  
    <div id="myDiv" style="outline-color:green;"> 
      Welcome to Geeks for Geeks.</div> 
    <br> 
    
    <button type="button" onclick="myFunction()"> 
        Click Here! 
    </button> 
  
    <script> 
        function myFunction() { 
            alert(document.getElementById( 
              "myDiv").style.outlineColor); 
        } 
    </script> 
  
</body> 
  
</html> 

Output:

Before clicking On Button:
After Clicking On Button:

Supported Browsers: The browser supported by DOM Style outlineColor Property are listed below:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

My Personal Notes

Recommended Posts: