HTML | DOM Style outlineStyle Property
The Style outlineStyle property in HTML DOM is used to set or return the style of the outline around an element.
Syntax:
object.style.outlineStyle
object.style.outlineStyle = value
:
Property Values:
Return Value: This method returns a String value representing the style of an element’s outline.
Example 1:
<!DOCTYPE html><html> <head> <title> HTML | DOM Style outlineStyle Property </title> <style> #myDiv { border: 1px solid red; outline: green dotted thick; } </style></head> <body> <h1> Geeks for Geeks</h1> <h2>HTML | DOM Style outlineStyle Property</h2> <div id="myDiv">Welcome to Geeks for Geeks.</div> <br> <button type="button" onclick="myFunction()"> Click Here! </button> <script> function myFunction() { document.getElementById("myDiv") .style.outlineStyle = "solid"; } </script> </body> </html> |
Output:
- Before click on the button:
- After click on the button:
Example 2:
<!DOCTYPE html><html> <head> <title> HTML | DOM Style outlineStyle Property </title> <style> #myDiv { border: 1px solid red; } </style></head> <body> <h1> HTML | DOM Style outlineStyle Property</h1> <div id="myDiv">Welcome to Geeks for Geeks.</div> <br> <button type="button" onclick="myFunction()"> Click Here! </button> <script> function myFunction() { document.getElementById("myDiv") .style.outlineStyle = "dotted"; } </script> </body> </html> |
Output:
- Before click on the button:
- After click on the button:
Supported Browsers: The browser supported by DOM Style outlineStyle Property are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML course.
