JavaScript Code

How to change width of paragraph using JavaScript?

Tutorials using JS

Problem Statement

change width of a paragraph element using JavaScript

Solution

to set or change the width of a paragraph element using JavaScript, we can use Element.width property. get the paragraph element and set its width property with the required length value

paragraphElement.width = '200px';

Program

when user clicks on the Click me button, we get the paragraph with the id message, and set its width using width 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 background color of the paragraph
  myPara.style.width = '200px';
});
</script>

</body>
</html>

Copyright @2022