Using jQuery to Set the Width of a Div

We can use jQuery to set the width of a div by using the jQuery width() method.

$("#div1").width(100);

Let’s take a look at a simple example below.

Let’s say we have the following HTML:

<div id="div1">
  <p>This paragraph is in a div that we want to set the width of.</p>
</div>

If we want to set the width of #div1 to say 200px, we will use the jQuery width() method in the following JavaScript code.

$("#div1").width(200);

If you are using WordPress, don’t forget to change the $ to jQuery as below:

jQuery("#div1").width(200);

We can also set the width of a div using pure JavaScript with the width Property.

Example of Using jQuery to Set the Width of a Div

In this example, we will have a simple div with a background color. The width of the div will be 100px. We will have an input field that will allow the user to enter a new width for the div. Here is the HTML code.

<style>#div2 { width:100px; height: 200px; background: #7bbfa2; }</style>
<div id="div1">
  <div id="div2"></div>
  <p>Enter a new width below:</p>
  <input type="text" id="new-width">
  <div id="click-me">Change width</div>
</div>

We can utilize the jQuery click() method to run a function when a user enters a new width.

We can use the val() method to get the new width the user has entered. We will then use the width() method to set the new width to #div2, based on what the user has entered.

Here is the code:

$("#click-me").click(function(){
  //Get the new width the user has entered
  var newWidth = Number($('#new-width').val());

  //Set the new width of #div
  $('#div2').width(newWidth);
});

The final code and output for setting the width of a div using jQuery is below:

Code Output:

Full Code:

<style>#div2 { width:100px; height: 200px; background: #7bbfa2; }</style>
<div id="div1">
  <div id="div2"></div>
  <p>Enter a new width below:</p>
  <input type="text" id="new-width">
  <div id="click-me">Change width</div>
</div>

<script>

$("#click-me").click(function(){
  var newWidth = Number($('#new-width').val());
  $('#div2').width(newWidth);
});

</script>

Hopefully this article has helped you to understand how to use jQuery to set the width of a div.