javaScript:DOM中常用尺寸

目录

前言(可以根据图示找到需要的尺寸,便于理解)

内尺寸

clientWidth 包含左右padding和宽度width(忽略滚动条的宽度)

clientHeight 包含上下padding和height(忽略滚动条的高度)

clientTop 获取元素上边框的大小

clientLeft 获取元素左边框的大小

外尺寸 

offsetWidth 包含左右padding 和 width 以及 border,包含滚动条宽度

offsetHeight 包含上下padding 和 height 以及border ,包含滚动条高度

 offsetParent:获取当前元素对象具有定位属性的父级元素

offsetLeft 指的是 当前元素的左边框距离  offsetParent 左边框的距离

offsetTop 指的是 当前元素的上边框距离  offsetParent 上边框的距离

相关代码 (重在理解)

滚动尺寸(案例中会用到,常用)

滚动尺寸scrollWidth( scrollHeight )(重点理解)

垂直滚动条与元素顶部距离scrollTop

水平滚动条与元素左边距离 scrollLeft

相关代码 

案例(要理解)

1.缓慢回到顶部

效果图

相关代码(代码较长,且注释比较详细不在逐行讲解,重点掌握实现的思路和对知识点的运用)

2.懒加载(会单独写一篇文章来讲)


前言(可以根据图示找到需要的尺寸,便于理解)

javaScript:DOM中常用尺寸_第1张图片

      在js中我们可以通过dom操作获取想要得到的尺寸,并对其进行一系列操作使其可以帮助我们实现动态布局、响应式设计、动画效果、碰撞检测等一系列功能。在这篇文章中,我们将了解常用的dom尺寸,并配合相关案例,来帮助我们了解和掌握这部分知识。

内尺寸

内尺寸

clientWidth 包含左右padding和宽度width(忽略滚动条的宽度)

clientHeight 包含上下padding和height(忽略滚动条的高度)

clientTop 获取元素上边框的大小

clientLeft 获取元素左边框的大小

外尺寸 

外尺寸(常用)

offsetWidth 包含左右padding 和 width 以及 border,包含滚动条宽度

offsetHeight 包含上下padding 和 height 以及border ,包含滚动条高度

 offsetParent:获取当前元素对象具有定位属性的父级元素

 offsetParent:获取当前元素对象具有定位属性的父级元素,如果所有的父级元素都没 定位属性,那么在标准浏览器下,offsetParent 指的是body,ie下是html

body和html 的offsetParent 都是null

offsetLeft 指的是 当前元素的左边框距离  offsetParent 左边框的距离

offsetTop 指的是 当前元素的上边框距离  offsetParent 上边框的距离

相关代码 (重在理解)




    
    
    dom中常用尺寸
    


    
豫章故郡,洪都新府,星分翼轸,地接衡庐豫章故郡,洪都新府,星分翼轸,地接衡庐 豫章故郡,洪都新府,星分翼轸,地接衡庐豫章故郡,洪都新府,星分翼轸,地接衡庐 豫章故郡,洪都新府,星分翼轸,地接衡庐豫章故郡,洪都新府,星分翼轸,地接衡庐 豫章故郡,洪都新府,星分翼轸,地接衡庐豫章故郡,洪都新府,星分翼轸,地接衡庐 豫章故郡,洪都新府,星分翼轸,地接衡庐豫章故郡,洪都新府,星分翼轸,地接衡庐 豫章故郡,洪都新府,星分翼轸,地接衡庐豫章故郡,洪都新府,星分翼轸,地接衡庐 豫章故郡,洪都新府,星分翼轸,地接衡庐豫章故郡,洪都新府,星分翼轸,地接衡庐 豫章故郡,洪都新府,星分翼轸,地接衡庐豫章故郡,洪都新府,星分翼轸,地接衡庐 豫章故郡,洪都新府,星分翼轸,地接衡庐豫章故郡,洪都新府,星分翼轸,地接衡庐

滚动尺寸(案例中会用到,常用)

滚动尺寸scrollWidth( scrollHeight )(重点理解)

scrollWidth滚动尺寸 返回值,当子级元素内容宽度大于 目标元素内容宽度的时候,那么

scrollWidth=子级盒模型的宽度+左右padding  ; 当子级元素内容宽度小于目标元素内容的时候

    scrollWidth = width + 左右padding

    scrollHeight 和 scrollWidth一致

垂直滚动条与元素顶部距离scrollTop

scrollTop  垂直滚动条与元素顶部距离,可以理解为元素内容被卷上去的高度,可以设置该值

水平滚动条与元素左边距离 scrollLeft

    scrollLeft 水平滚动条与元素左边距离,可以理解为元素内容被卷到左边的宽度,可以设置该值

相关代码 




    
    
    滚动尺寸
    


    
滕王高阁临江,飞羽阿打卡搭嘎含税单价
滕王高阁临江,飞羽阿打卡搭嘎含税单价
滕王高阁临江,飞羽阿打卡搭嘎含税单价
滕王高阁临江,飞羽阿打卡搭嘎含税单价
滕王高阁临江,飞羽阿打卡搭嘎含税单价
滕王高阁临江,飞羽阿打卡搭嘎含税单价
滕王高阁临江,飞羽阿打卡搭嘎含税单价
滕王高阁临江,飞羽阿打卡搭嘎含税单价
滕王高阁临江,飞羽阿打卡搭嘎含税单价
滕王高阁临江,飞羽阿打卡搭嘎含税单价
滕王高阁临江,飞羽阿打卡搭嘎含税单价
滕王高阁临江,飞羽阿打卡搭嘎含税单价
滕王高阁临江,飞羽阿打卡搭嘎含税单价
滕王高阁临江,飞羽阿打卡搭嘎含税单价
滕王高阁临江,飞羽阿打卡搭嘎含税单价
回到
顶部

案例(要理解)

1.缓慢回到顶部

效果图

javaScript:DOM中常用尺寸_第2张图片

相关代码(代码较长,且注释比较详细不在逐行讲解,重点掌握实现的思路和对知识点的运用)




  回到顶部
  


  

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

^

2.懒加载(会单独写一篇文章来讲)

        对于懒加载的内容,我会单独写一篇文章进行详细介绍,以便更好地解释懒加载的概念、原理和使用方法,并综合使用DOM尺寸的情况进行说明。期待您的关注和期待!在文章完成后,我将很高兴为您提供反馈或帮助。谢谢!

你可能感兴趣的:(javascript,javascript,前端,开发语言)