博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
offsetWidth,clientWidth,width,scrollWidth之间的区别
阅读量:5756 次
发布时间:2019-06-18

本文共 1302 字,大约阅读时间需要 4 分钟。

hot3.png

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)获取带外边距的宽度

 

 

转载于:https://my.oschina.net/u/3680343/blog/1941547

你可能感兴趣的文章
setprecision后是要四舍五入吗?
查看>>
上云就是这么简单——阿里云10分钟快速入门
查看>>
MFC多线程的创建,包括工作线程和用户界面线程
查看>>
我的友情链接
查看>>
FreeNAS8 ISCSI target & initiator for linux/windows
查看>>
PostgreSQL数据库集群初始化
查看>>
++重载
查看>>
Rainbond 5.0.4版本发布-做最好用的云应用操作系统
查看>>
nodejs 完成mqtt服务端
查看>>
sql server 触发器
查看>>
[工具]前端自动化工具grunt+bower+yoman
查看>>
关于完成生鲜电商项目后的一点总结
查看>>
noip2012 普及组
查看>>
第二阶段 铁大Facebook——十天冲刺(10)
查看>>
Java判断是否为垃圾_Java GC如何判断对象是否为垃圾
查看>>
多项式前k项和java_多项式朴素贝叶斯softmax改变
查看>>
java数组只能交换0下标和n_编程练习-只用0交换排序数组
查看>>
centos7安装mysql视频教程_centos7安装mysql(完整)
查看>>
php图片赋值,php如何优雅地赋值
查看>>
【探索HTML5第二弹01】HTML5的前世今生以及来世
查看>>