HTML DOM Style outlineColor Property

HTMLWeb DevelopmentFront End Technology

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

Syntax

Following is the syntax −

  • Returning outlineColor

object.style.outlineColor
  • Modifying outlineColor

object.style.outlineColor = “color”

Example

Let us see an example of style outlineColor property −

 Live Demo

<!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 outlineColor Property Example</h1>
<p></p>
<button onclick="add()" class="btn">Add outline</button>
<script>
   function add() {
      document.querySelector('p').style.outlineColor = "#db133a";
   }
</script>
</body>
</html>

Output

This will produce the following output −

Click on “Add outline” button to change the color of outline around green box.

raja
Published on 22-Jul-2019 14:19:00
Advertisements