调整元素的大小-变大而不是变窄

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>

首先-title的顶部和底部边距在哪里？

为什么单击box-sizing后丢失button？

结果-story变大而不是变窄10px；

Answer 1

您使用的方法不正确，请改用css()

有关更多信息，请参见jQuery docs

  

.css(width)和.width()之间的区别在于后者   返回无单位像素值（例如400），而前者   返回一个单位完整的值（例如400px）。 .width()   当需要在元素中使用元素的宽度时，建议使用   数学计算

$('#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>

Answer 2

我不同意接受的答案。说明 getters 之间的区别是不准确的，因此不要提出这个问题。在这里，您需要了解为什么使用每种方法设置宽度都不同。您需要设置者的说明。

首先，我们需要牢记两个不同的概念：width和innerWidth（也有outerWidth，但我们在这里不需要）。

使用width()时，您要将元素宽度（无填充/边框）设置为指定的值。换句话说，width()属性将CSS属性width设置为一个值，该值将使内容宽度等于所需的值。它不会简单地设置CSS属性width的值。

在您的情况下，您的填充为45px，并且您希望内容宽度为90px，因此总宽度为135px，并且由于我们使用的是box-sizing:border-box必须将width属性设置为135px而不是90px才能获得等于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>

如果您检查开发工具，您将清楚地看到以下内容：

现在，如果删除box-sizing:border-box，则内容宽度和值width都等于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>

在这种情况下，宽度不包括填充，因此jQuery会简单地将width属性设置为指定的值。

---

使用innerWidth()时，jQuery将以使width + padding等于指定值的方式设置width属性。

$('#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>

这是您正在寻找的结果，因为您在考虑整体宽度（填充+宽度），而不仅仅是内容宽度。

这是没有box-sizing的结果。再次为width属性设置一个不同的值。

$('#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>

---

现在，使用.css()时不需要复杂的计算。 jQuery只需将width属性设置为指定的值，然后结果将取决于其他CSS属性。

因此，使用width() / innerWidth()将强制jQuery计算并设置width属性的特定值（有时与指定的值不同），以便获得足够的结果，但使用.css()可以简单地将width属性设置为指定的值，而无需计算。

---

关于页边距问题，您可以通过将overflow:hidden设置为父容器#story来轻松解决margin-collasing问题。