javascript - 获取指定元素的总宽度，包括边距和填充

Question

好的，我有这个代码。

<script>
$(document).ready(function(){

    var totalWidth = 0;

    $('.thewidgets').each(function(index) {
        totalWidth += parseInt($(this).width(), 10);
    });

    $('#marginwidgets').css({width: totalWidth});

});
</script>

html

<div id="marginwidgets">
 <div class="thewidgets">
  the widgets 1
 </div>
 <div class="thewidgets">
  the widgets 2
 </div>
 <div class="thewidgets">
  the widgets 3
 </div>
</div>

和CSS

#marginwidgets
{
margin: 0px auto;
overflow: auto;
max-width: 100%;
}
.thewidgets
{
width: 284px
padding: 5px;
margin-left: 10px;
}
.thewidgets:first-child
{
margin-left: 0px !important;
}

正如您在脚本中看到的那样，例程是获取 .thewidgets 的总宽度，然后将其总宽度应用到#marginwidgets 中，这应该使#marginwidgets 完美集中。

但我希望 .thewidgets 的总宽度包括边距和填充，然后将其应用到 #marginwidgets 中，但我不知道如何制作它，请问这里有人能弄清楚该怎么做吗？

Answer 1

使用outerWidth而不是宽度，并将 true 作为参数传递以包含边距:

$(this).outerWidth(true);

此外，维度函数返回数字而不是字符串，因此 parseInt 不是必需的，尽管您可能想使用 Math.floor、Math.ceil 或 Math.round。