Home / Questions / How to Change Border Color of Div in JavaScript?
Explanatory Question

How to Change Border Color of Div in JavaScript?

👁 293 Views
📘 Detailed Answer
🕒 Easy to Read
Read the answer carefully and go through the related questions on the right side to improve your understanding of this topic.

Answer with Explanation

To change the border color of a div using JavaScript, get reference to the element, and assign required color value to the element.style.borderColor property.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head> 
<body>
    <h2>Change Border Color of Div in JavaScript</h2>
    <div id="myDiv" style="border:2px solid green">
        <p>This is a paragraph in Div.</p>
        <span>This is a span in Div.</span>
    </div>
    <br>
    <button type="button" onclick="changeStyle()">Click Me</button>

    <script>
    function changeStyle(){
        var element = document.getElementById("myDiv");
        element.style.borderColor = "red";
    }
    </script>

</body>
</html>