loading...

2

权威分析浏览器clientWidth,offsetWidth,getBoundingClientRect

html css读完大概需要3分钟

  • 发布时间:2018-09-23 15:44 星期日
  • 刘伟波
  • 415
  • 更新于2018-09-23 15:49 星期日

client***属性(clientWidth、clientHeight):

包括padding、content部分,不包括border
http://images.liuweibo.cn/image/common/client20180923154518_1537688734938_34950_1537688836699.png

offset***属性(offsetWidth、offsetHeight、offsetTop、offsetLeft):

元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框、内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before或:after等伪类元素的高度。
http://images.liuweibo.cn/image/common/offset20180923154817_1537688903922_34074_1537688910187.png

这个属性值会被四舍五入为整数值,如果你需要一个浮点数值,请用element.getBoundingClientRect().

getBoundingClientRect()

返回元素的大小及其相对于视口的位置。

http://images.liuweibo.cn/image/common/getBoundingClientRect20180923154748_1537688872731_5156_1537688880905.png

摘自:MDN

     <br>

作者:刘伟波

链接:http://www.liuweibo.cn/p/221

来源:刘伟波博客

本文原创版权属于刘伟波 ,转载请注明出处,谢谢合作

你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 segmentfault平台, 也可以来我的直播间来提问。
    关于技术问题或者有啥不懂的都可以留言, 我会定期回复答疑, 也可以来 我的直播间 提问, 推荐最新仓库 前端知识体系, 感謝支持!