使用边框框时使用jquery获取元素的宽度答案

【问题标题】：Get width of element with jquery when using border-box使用边框框时使用jquery获取元素的宽度
【发布时间】：2016-04-09 15:49:34
【问题描述】：

所以当使用border-box时没有实际的宽度属性，所以我无法通过：

$("#my_id").width()

也没有

.outerWidth()

也没有别的我的猜测是它必须通过像素计算，我不知道，似乎太复杂了，必须有更简单的方法。

谢谢！

附言 - 使用引导程序 - 使用 jquery（显然是对的？）

【问题讨论】：

任何 jsfiddle 或工作演示？？
不清楚你在问什么； .width() 适用于带有 box-sizing:border-box 的元素，请参阅jsfiddle.net/72twd1ye
很清楚 OP 的要求是什么。 / 无论如何，我测试了outerWidth()，它工作正常，See

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

这个演示排除了 jQuery 没有给出宽度。它给了。

$(document).ready(function(){

var beforeBorderBox = $('.holly-molly').outerWidth();
$('.holly-molly').append('<p>beforeBorderBox:'+ beforeBorderBox + '</p>');
var afterBorderBox = $('.holly-molly').css('box-sizing', 'border-box').outerWidth();

$('.holly-molly').append('<p>afterBorderBox:'+ afterBorderBox + '</p>');

});

.holly-molly {
  background: tomato;
  min-height: 80px;
  text-align: center;
  color: #fff;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holly-molly">
  <span>Holly Molly</span>
</div>

【讨论】：

【解决方案2】：

我们应该使用 $("#my_id").width() 来获取实际元素。如果你也想包含填充（不包括边框），那么你可以使用 $("#my_id").innerWidth()。如果你还想包含边距，那么你可以使用 $(#my_id').outerWidth(true))

【讨论】：

重点是，css中没有定义宽度，所以不能使用，我在描述中说过:)