好的,我有这个代码。
<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
而不是宽度,并将 true
作为参数传递以包含边距:
$(this).outerWidth(true);
此外,维度函数返回数字而不是字符串,因此 parseInt
不是必需的,尽管您可能想使用 Math.floor
、Math.ceil
或 Math.round
。
关于javascript - 获取指定元素的总宽度,包括边距和填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12851118/