How to Change Border Style of Div in JavaScript?

Javascript > DOM Manipulation > Introduction to DOM

Long Question

299

Answer:

JavaScript – Change the Border Style of Div

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

borderStyle property takes one of the following values.

dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head> 
<body>
    <h2>Change Border Style 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.borderStyle = "dashed";
    }
    </script>
</body>
</html>

Go to Question List

This Particular section is dedicated to Question & Answer only. If you want learn more about Javascript. Then you can visit below links to get more depth on this subject.

Javascript Syllabus

Javascript Tutorial

Javascript Programs

JavaScript Interview Questions

# C Tutorials # JAVA Tutorials # HTML Tutorials # Computer Fundamental # Data Structure # DBMS Tutorials SQL # C# Language # R Language # PHP # Python # Vue JS