var divObj=document.getElementById("div");
1.offsetWidth
var divOffsetWidth=divObj.offsetWidth; //包含:元素宽度+内边距+边框
var divOffsetWidth=$(divObj).outerWidth(false);//false:(包含:元素宽度+内边距+边框),true:(包含:元素宽度+内边距+边框+外边距)
附:高度取值同上
2.clientWidth
var divClientWidth=divObj.clientWidth;//元素宽度+内边距
var divClientWidth=$(divObj).innerWidth();//元素宽度+内边距
附:高度取值同上
3.width
var divWidth=divObj.style.width;//元素宽度
var divWidth=$(divObj).width();//元素宽度
附:高度取值同上
4.scrollWidth
var divScrollWidth=divObj.scrollWidth;//元素宽度+内边距+溢出尺寸(如果有的话)
jquery无此相同的调用
附:高度取值同上
注意:
- offsetWidth(offsetHeight)与style.width(style.height)的区别
offsetWidth返回值不带单位,style.width返回值带单位,如果需要对取得的值进行计算,用offsetWidth比较方便,如果拿到offsetWidth设置style.width的值需要加上单位“px”。
- style.width/style.height与scrollWidth/scrollHeight是可读写的属性,clientWidth/clientHeight与offsetWidth/offsetHeight是只读属性
- style.height的值需要事先定义,否则取到的值为空。而且必须要定义在html里,如果定义在css里,style.height的值仍然为空,但元素偏移有效;而offsetWidth则仍能取到。
总结:
1、通过style.width(style.height)或者jQuery的$(divObj).width()/$(divObj).height()获取/设置元素的宽高
2、通过$(divObj).innerWidth()/$(divObj).innerHeight()获取不包含边框、不包含外边距的宽度
3、若要获取元素包含边框的宽度,则可通过divObj.offsetWidth/divObj.offsetHeight或jQuery的Width(false)/$(divObj).outerHeight(false)获取
4、通过$(divObj).outerWidth(true)/$(divObj).outerHeight(true)获取带外边距的宽度