- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style outlineWidth Property
The DOM style outlineWidth property returns and modify the width of the outline around an element in an HTML document.
Syntax
Following is the syntax −
Returning outlineWidth
object.style.outlineWidth
Modifying outlineWidth
object.style.outlineWidth = “value”
Example
Let us see an example of style outlineWidth property −
<!DOCTYPE html> <html> <head> <style> body { color: #000; background: lightblue; height: 100vh; } p { background-color: seagreen; height: 200px; width: 200px; outline: 2px solid #000; } .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; } </style> </head> <body> <h1>DOM Style outlineWidth Property Example</h1> <p></p> <button onclick="add()" class="btn">Add outline</button> <script> function add() { document.querySelector('p').style.outlineWidth = "5px"; } </script> </body> </html>
Output
This will produce the following output −
Click on “Add outline” button to change the width of the outline around green box.
Advertisements