Question

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

$("#my_id").width()

，也不

.outerWidth()

也不是其他任何事情我的猜测是它必须通过像素来计算，我不知道，看起来太复杂了，必须有一种更简单的方法。

谢谢！

P.S。 - 使用bootstrap - 使用jquery（显然是对的？）

Answer 1

我们应该使用 $（“＃my_id”）。width（）获得实际元素。如果你想包括填充（不包括边框），那么你可以使用 $（“＃my_id”）。innerWidth（）。如果你想包括保证金，那么你可以使用 $（＃my_id'）。outerWidth（true））

Answer 2

这个演示排除了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>

使用border-box时，使用jquery获取元素的宽度

2 个答案: