不一样的元素大小

@(C-工作问题)

元素的大小

在讲到offsetheight,clientheight,scrollheight的时候老是搞混,傻傻的分不清楚,在看完高程设计之后终于明白了其中的区别

偏移量

偏移量:包括元素在屏幕上占用的所有可见的空间,元素的可见大小是由其高度,宽度决定,包括所有的内边距,滚动条和边框大小(不包括外边距margin)
offsetHeight:元素在垂直方向上所占用的空间大小,以像素计,包括元素的高度(可见的) 水平滚动条的高度,上边框的高度和下边框的高度
offsetWidth:元素在水平方向所占用的空间大小,以像素计,包括元素的宽度(可见的) 垂直滚动条的宽度,左边框宽度和有边框宽度,
offsetLeft:元素的左外边框值包含元素的左内边框之间的像素距离
offsetTop: 元素的上外边框至包含元素的上内边框之间的像素距离
其中offsetLeft和offsetTop属性与包含元素有关,包含元素的引用保存在offsetParent属性中,offsetParent属性不一定与parentNode的值相等,例如<td>元素的offsetParent是作为其祖先元素的<table>元素
要想知道元素在页面的偏移量,将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加,如此循环值根元素,就可以得到一个基本准确的值

Dimensions-offset.png

客户区大小

元素的客户区大小,指的是元素内容及其内边距所占据的空间大小,有关客户区的大小的属性有两个clientWidth和clientHeight其中clientWidth属性是元素内容区宽度加上左右内边距宽度,clientHeight属性是元素内容区加上上下内边距高度 都是不包括滚动条的


Dimensions-client.png

滚动大小

滚动大小:指的是包含滚动内容的元素的大小,
scrollHeight :在没有滚动条的情况下,元素内容的总高度
scrollWidth:在没有滚动条的情况下,元素内容的总宽度
scrollLeft:被隐藏在内容区域左侧的像素数,通过设置这个属性可以改变元素的滚动位置
scrollTop:被隐藏在内容区域上方的像素数,通过设置这个属性可以改变元素的滚动位置


scrollHeight.png

最后来张总结图


589d33d1000196e705000419.jpg
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,825评论 1 92
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,352评论 1 41
  • 今天简要总结一下在DOM中关于样式的一些属性。 元素大小 偏移量 offsetHeight:表示元素在垂直方向上占...
    FeRookie阅读 1,807评论 1 4
  • 我们向往的远方却是他人渴望逃离的原地,或许旅行便是这样,你从远道而来,他渴望去到远方。 ...
    米芬阅读 695评论 3 6
  • 不知从什么时候,我开始仔细考虑我和xw的未来。老实说,刚开始的时候我根本没想这么远。 虽然周围也可能有种种阻力,但...
    北京东路2006阅读 151评论 0 0