HTML DOM Style outline Property

HTMLWeb DevelopmentFront End Technology

The DOM style outline property returns and modify the outline of an element in an HTML document.

Syntax

Following is the syntax −

  • 1. Returning outline

object.style.outline
  • Modifying outline

object.style.outline = “width style color”

Example

Let us see an example of HTML DOM style outline property −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
   }
   p {
      background-color: seagreen;
      height: 200px;
      width: 200px;
   }
   .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 outline Property Example</h1>
<p></p>
<button onclick="add()" class="btn">Add outline</button>
<script>
   function add() {
      document.querySelector('p').style.outline = "2px solid #000";
   }
</script>
</body>
</html>

Output

This will produce the following output −

Click on “Add outline” button to add outline to green box.

raja
Published on 22-Jul-2019 17:45:02
Advertisements