How to set the color of the rule between columns with JavaScript?

Javascript Web Development Front End Scripts

Use the columnRuleColor property in JavaScript to set the color of the rules. You can try to run the following code to set the color of the rule between columns with JavaScript −

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         #myID {
            column-count: 4;
            column-rule: 4px outset yellow;
         }
      </style>
   </head>
   <body>
      <p>Click below to change color</p>
      <button onclick="display()">Change Color between Columns</button>
      <div id="myID">
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
      </div>
      <script>
         function display() {
            document.getElementById("myID").style.columnRuleColor = "red";
         }
      </script>
   </body>
</html>

Karthikeya Boyini

Published on 27-Feb-2018 11:21:03

Previous Page Print Page