Resizing an element using $.width() becomes larger instead of narrower

Question

$('#btnw').on('click', function() {
  $('#story').width(90 + 'px');
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#story {
  width: 100px;
  background: lightgreen;
  padding-right: 45px;
}

.title {
  background: gold;
  margin: 5px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='story'>
  <div class='title'>
    lorem
  </div>
</div>
<br>
<button id='btnw'>CLICK</button>

First of all - where are top and bottom margins on title?

And why box-sizing is lost after click on button?

Result - story becomes larger instead of narrower for 10px;

Answer 1

I don't agree with the accepted answer. Explaning the difference bettwen the getters isn't accurate and don't asnwer the question. Here you need to understand why setting the width using each method is different. You need the explanation of the setters.

First, we need to keep in mind two different concepts: width and innerWidth (there is also the outerWidth but we don't need it here).

When using width() you are setting the element width (without padding/border) to the value specified. In other words, the width() property will set the CSS property width to a value that will make the content width equal to the needed value. It will not simply set the value of the CSS property width.

In your case you have a padding of 45px and you want the content width to be 90px so the total width is 135px and since we are using box-sizing:border-box the width property need to be set to 135px and not 90px in order to achieve a content width equal to 90px

$('#btnw').on('click', function() {
  $('#story').width(90+'px');
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#story {
  width: 100px;
  background: lightgreen;
  padding-right: 45px;
}

.title {
  background: gold;
  margin: 5px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='story'>
  <div class='title'>
    lorem
  </div>
</div>
<br>
<button id='btnw'>CLICK</button>

If you check the dev tools you will clearly see this:

Now if you remove box-sizing:border-box you will have the content width and the value of width both equal to 90px.

$('#btnw').on('click', function() {
  $('#story').width(90+'px');
});

* {
  margin: 0;
  padding: 0;
}

#story {
  width: 100px;
  background: lightgreen;
  padding-right: 45px;
}

.title {
  background: gold;
  margin: 5px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='story'>
  <div class='title'>
    lorem
  </div>
</div>
<br>
<button id='btnw'>CLICK</button>

In this case, width doesn't include padding thus jQuery will simply set the width property to the value specified.

---

When using innerWidth() , jQuery will set the width property in a way to make width+padding equal to the value specified.

$('#btnw').on('click', function() {
  $('#story').innerWidth(90+'px');
});

* {
  margin: 0;
  padding: 0;
}

#story {
  width: 100px;
  background: lightgreen;
  padding-right: 45px;
  box-sizing:border-box;
}

.title {
  background: gold;
  margin: 5px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='story'>
  <div class='title'>
    lorem
  </div>
</div>
<br>
<button id='btnw'>CLICK</button>

This is somehow the result you are looking for because you was thinking about the overall width (padding + width) and not only the content width.

Here is the result without box-sizing. Again a different value set to the width property.

$('#btnw').on('click', function() {
  $('#story').innerWidth(90+'px');
});

* {
  margin: 0;
  padding: 0;
}

#story {
  width: 100px;
  background: lightgreen;
  padding-right: 45px;
}

.title {
  background: gold;
  margin: 5px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='story'>
  <div class='title'>
    lorem
  </div>
</div>
<br>
<button id='btnw'>CLICK</button>

---

Now, when using .css() there is no complex calculation. jQuery will simply set the width property to value specified and then the result will depend on the other CSS properties.

So using width()/innerWidth() will oblige jQuery to calculate and set a specific value (sometimes different from the one specified) to the width property in order to have the adequate result BUT using .css() will simply set the width property with the value specified with no calculation.

---

Concerning the margin you are facing a margin-collasing issue that you can easily fix by setting overflow:hidden to the parent container #story.

Answer 2

You are using the method incorrectly, use css() instead

See the jQuery docs for more info

The difference between .css(width) and .width() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). The .width() method is recommended when an element's width needs to be used in a mathematical calculation

$('#btnw').on('click', function() {
  $('#story').css('width', '90px');
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#story {
  width: 100px;
  background: lightgreen;
  padding-right: 45px;
}

.title {
  background: gold;
  margin: 5px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='story'>
  <div class='title'>
    lorem
  </div>
</div>
<br>
<button id='btnw'>CLICK</button>