HTML DOM Style outlineOffset Property

HTMLWeb DevelopmentFront End Technology

The DOM style outlineOffset property returns and offsets the outline around an element in an HTML document.

Syntax

Following is the syntax −

  • Returning outlineOffset

object.style.outlineOffset
  • Modifying outlineOffset

object.style.outlineOffset = “value”

Example

Let us see an example of style outlineOffset property −

 Live Demo

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

Output

This will produce the following output −

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

raja
Published on 23-Jul-2019 10:35:03
Advertisements