(默认) box-sizing: content-box;
//Jq
$('#ele').width(); //盒子content宽度
$('#ele').innerWidth(); //盒子content + padding
$('#ele').outerWidth(); //盒子content + padding + border
$('#ele').outerWidth(true); //盒子content + padding + border + margin
//js
$('#ele')[0].offsetWidth //盒子content宽度
box-sizing: border-box
$('#ele').width(); //盒子content宽度
$('#ele').innerWidth(); //盒子content + padding
$('#ele').outerWidth(); //盒子content + padding + border
$('#ele').outerWidth(true); //盒子content + padding + border + margin
//js
$('#ele')[0].offsetWidth //盒子content + padding + border宽度
对于获取绝对定位left值而言
//jQ
$('#ele').position().left //margin处开始计算(不受margin影响)
//js
$('#ele')[0].offsetLeft //border处开始计算(随margin变化而变化)
//假如设置left: 0, margin: 20
//则 jq获取值为 0, js为20
//赋值时两效果一样,但获取的内容不一样
$('#ele')[0].style.left = '0px'
$('#ele').css('left', '0px')
总体而言,Jq的取值方式没有变化,原生js则需要注意border和padding问题;同理,对应的赋值问题也需要注意;对于position定位,jQ的left值不受margin值影响,及赋值多少,获取就是多少,而原生js获取的值等于赋值时的值加上margin-left.