Tutorials using JS
Change border of a Paragraph using JavaScript
In this tutorial, you shall learn how to set/change border of a paragraph element using JavaScript.
Solution
To set or change the border of a paragraph element using JavaScript, we can use Element.style.border property. Get the paragraph element and set its style.border property with the required border value.
paragraphElement.style.border = '2px dotted blue';Program
When user clicks on the Click me button, we get the paragraph with the id message and set its border using style.border property.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Tutorial</h1>
<button id="myBtn">Click me</button>
<p id="message">This is a paragraph. Welcome to JavaScript tutorials.</p>
<script>
document.getElementById("myBtn").addEventListener("click", function() {
//get the paragraph element
const myPara = document.getElementById("message");
//set the border of the paragraph
myPara.style.border = '2px dotted blue';
});
</script>
</body>
</html>