[英]get the total width of specified elements including there margin and padding
Ok i have this code. 好的,我有这个代码。
<script>
$(document).ready(function(){
var totalWidth = 0;
$('.thewidgets').each(function(index) {
totalWidth += parseInt($(this).width(), 10);
});
$('#marginwidgets').css({width: totalWidth});
});
</script>
the html 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>
and the css 和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;
}
As you can see in the script, the routine is to get the total width of .thewidgets and then apply the total width of that into the #marginwidgets that should make perfect centralized of #marginwidgets. 正如您在脚本中看到的那样,例程是获取.thewidgets的总宽度,然后将其总宽度应用于应该使#marginwidgets完美集中的#marginwidgets。
but i want the total width of .thewidgets include there margin and there paddings and then apply it into the #marginwidgets but i dont know how to make it, could someone here figure it out how to do it please? 但是我想要.thewidgets的总宽度包括边距和边距,然后将其应用到#marginwidgets中,但是我不知道如何制作,请问有人可以在这里弄清楚该怎么做吗?
Use outerWidth
instead of width, and pass true
as an argument to include the margins: 使用outerWidth
而不是width,并传递true
作为参数以包括边距:
$(this).outerWidth(true);
Also the dimension functions return Numbers as opposed to strings so parseInt
isnt necessary though you might want to use Math.floor
, Math.ceil
or Math.round
. 维度函数还返回Numbers而不是字符串,因此尽管您可能想使用Math.floor
, Math.ceil
或Math.round
,但parseInt
并不是必需的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.