獲取指定元素的總寬度，包括邊距和填充

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而不是width，並傳遞true作為參數以包括邊距：

$(this).outerWidth(true);

維度函數還返回Numbers而不是字符串，因此盡管您可能想使用Math.floor ， Math.ceil或Math.round ，但parseInt並不是必需的。