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 outline in an element’s.
Example-1:
html
<!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 :
html
<!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 1 and above
- Edge 12 and above
- Internet Explorer 8 and above
- Firefox 1.5 and above
- Opera 7 and above
- Safari 1.2 and above
Please Login to comment...