好的,我有这段代码。

<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中,但是我不知道如何制作,请问有人可以在这里弄清楚该怎么做吗?

最佳答案

使用outerWidth而不是width,并传递true作为参数以包括边距:

$(this).outerWidth(true);


同样,维函数返回数字而不是字符串,因此尽管您可能想使用parseIntMath.floorMath.ceil,但Math.round并不是必需的。

关于javascript - 获取指定元素的总宽度,包括边距和填充,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/12851118/

10-12 00:47