Question

令人惊讶的是，我无法在jQuery documentation中找到这个问题的答案。

我明白，根据大纲specs

大纲不占用空间，它们被绘制在内容
之上

但是，在使用轮廓时，我看到元素宽度的不同结果让我感到困惑。

Answer 1

轮廓应用于边界规则上方。因此，我们可以从jQuery文档中看到outerWidth（）不包括其计算的大纲：

获取匹配元素集中第一个元素的当前计算宽度，包括填充和边框。

没有提及大纲。

因此，要计算包括轮廓在内的宽度，您需要明确添加它：

parseFloat($(elem).outerWidth())+parseFloat($(elem).css('outline-width'));

注意：即使您决定采用包含边距的元素宽度，也不会仅使用outerWidth(true)来获取轮廓宽度值。您需要手动添加轮廓宽度。

Answer 2

简单的测试表明情况并非如此。 jquery版本1,2,3都没有考虑到这一点 - outerWidth()对于不同的outline来说仍然是相同的：

$('.outlined').text(function() { return $(this).outerWidth(); })

.outlined {
  width:50px;
  height:50px;
  border:1px solid #f00;
  margin-top:10px;
}

.outlined:nth-child(2) { outline: 2px solid #000; }
.outlined:nth-child(3) { outline: 3px solid #333; }
.outlined:nth-child(4) { outline: 4px solid #666; }
.outlined:nth-child(5) { outline: 5px solid #999; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <div class="outlined"></div>
  <div class="outlined"></div>
  <div class="outlined"></div>
  <div class="outlined"></div>
  <div class="outlined"></div>
</div>

Answer 3

不，jquery函数.outerWidth（）不包括css outline和margin属性。它包括Padding＆amp;边境css属性。

jQuery outerWidth（）包含css大纲吗？

3 个答案: