How to set the style of the outline around an element with JavaScript?

JavascriptWeb DevelopmentFront End Scripts

To set the outline style, use the outlineStyle property. The outline can be solid, dotted, dashed, etc.

Example

You can try to run the following code to set the style of the outline around an element with JavaScript −

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            width: 450px;
            background-color: orange;
            border: 3px solid red;
            margin-left: 20px;
         }
      </style>
   </head>
   <body>
      <p>Click below to add Outline Style.</p>
      <div id="box">
         <p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
         <p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
         <p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
      </div>
      <br>
      <button type="button" onclick="display()">Set Outline Style</button>
      <br>
      <script>
         function display() {
            document.getElementById("box").style.outlineColor = "#5F5F5F";
            document.getElementById("box").style.outlineStyle = "solid";
         }
      </script>
   </body>
</html>
raja
Published on 27-Feb-2018 14:21:57
Advertisements