官网网站建设收费,黑别人网站,网站建设ftp软件,网站设置域名目录
前言#xff08;可以根据图示找到需要的尺寸#xff0c;便于理解#xff09;
内尺寸
clientWidth 包含左右padding和宽度width#xff08;忽略滚动条的宽度#xff09;
clientHeight 包含上下padding和height#xff08;忽略滚动条的高度#xff09;
clientTo…目录
前言可以根据图示找到需要的尺寸便于理解
内尺寸
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.懒加载会单独写一篇文章来讲 前言可以根据图示找到需要的尺寸便于理解 在js中我们可以通过dom操作获取想要得到的尺寸并对其进行一系列操作使其可以帮助我们实现动态布局、响应式设计、动画效果、碰撞检测等一系列功能。在这篇文章中我们将了解常用的dom尺寸并配合相关案例来帮助我们了解和掌握这部分知识。
内尺寸 内尺寸 clientWidth 包含左右padding和宽度width忽略滚动条的宽度 clientHeight 包含上下padding和height忽略滚动条的高度 clientTop 获取元素上边框的大小 clientLeft 获取元素左边框的大小 外尺寸 外尺寸常用 offsetWidth 包含左右padding 和 width 以及 border包含滚动条宽度 offsetHeight 包含上下padding 和 height 以及border 包含滚动条高度 offsetParent:获取当前元素对象具有定位属性的父级元素 offsetParent:获取当前元素对象具有定位属性的父级元素如果所有的父级元素都没 定位属性那么在标准浏览器下offsetParent 指的是bodyie下是html body和html 的offsetParent 都是null offsetLeft 指的是 当前元素的左边框距离 offsetParent 左边框的距离 offsetTop 指的是 当前元素的上边框距离 offsetParent 上边框的距离 相关代码 重在理解
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titledom中常用尺寸/titlestyle*{margin: 0;padding: 0;}.wp{width: 300px;height: 300px;border: 10px #f00 solid;padding: 10px;margin: 20px auto;overflow: auto;}.far{width: 600px;margin: 20px auto;border: 10px #f60 solid;padding: 50px 0;position: relative;}/style
/head
bodydiv classfardiv classwp豫章故郡洪都新府星分翼轸地接衡庐豫章故郡洪都新府星分翼轸地接衡庐豫章故郡洪都新府星分翼轸地接衡庐豫章故郡洪都新府星分翼轸地接衡庐豫章故郡洪都新府星分翼轸地接衡庐豫章故郡洪都新府星分翼轸地接衡庐豫章故郡洪都新府星分翼轸地接衡庐豫章故郡洪都新府星分翼轸地接衡庐豫章故郡洪都新府星分翼轸地接衡庐豫章故郡洪都新府星分翼轸地接衡庐豫章故郡洪都新府星分翼轸地接衡庐豫章故郡洪都新府星分翼轸地接衡庐豫章故郡洪都新府星分翼轸地接衡庐豫章故郡洪都新府星分翼轸地接衡庐豫章故郡洪都新府星分翼轸地接衡庐豫章故郡洪都新府星分翼轸地接衡庐豫章故郡洪都新府星分翼轸地接衡庐豫章故郡洪都新府星分翼轸地接衡庐/div/div
/body
/html
scriptlet wp document.querySelector(.wp)/*内尺寸clientWidth 包含左右padding和宽度width忽略滚动条的宽度clientHeight 包含上下padding和height忽略滚动条的高度clientTop 获取元素上边框的大小clientLeft 获取元素左边框的大小外尺寸offsetWidth 包含左右padding 和 width 以及 border包含滚动条宽度offsetHeight 包含上下padding 和 height 以及border 包含滚动条高度offsetParent:获取当前元素对象具有定位属性的父级元素如果所有的父级元素都没定位属性那么在标准浏览器下offsetParent 指的是bodyie下是htmlbody和html 的offsetParent 都是nulloffsetLeft 指的是 当前元素的左边框距离 offsetParent 左边框的距离offsetTop 指的是 当前元素的上边框距离 offsetParent 上边框的距离*/console.log(wp.clientWidth,wp.clientHeight,wp.clientTop,wp.clientLeft);let body document.body;console.log(body.clientWidth,body.clientHeight);console.log(wp.offsetWidth,wp.offsetHeight);//获取当前元素的定位父元素console.log(wp.offsetParent,wp.offsetLeft,wp.offsetTop);
/script
滚动尺寸案例中会用到常用
滚动尺寸scrollWidth scrollHeight 重点理解 scrollWidth滚动尺寸 返回值当子级元素内容宽度大于 目标元素内容宽度的时候那么 scrollWidth子级盒模型的宽度左右padding 当子级元素内容宽度小于目标元素内容的时候 scrollWidth width 左右padding scrollHeight 和 scrollWidth一致 垂直滚动条与元素顶部距离scrollTop scrollTop 垂直滚动条与元素顶部距离可以理解为元素内容被卷上去的高度可以设置该值 水平滚动条与元素左边距离 scrollLeft scrollLeft 水平滚动条与元素左边距离可以理解为元素内容被卷到左边的宽度可以设置该值 相关代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title滚动尺寸/titlestyle*{margin: 0;padding: 0;}.wp{width: 400px;height: 400px;border: 1px #000 solid;overflow: auto;padding: 0 30px;}.cont{width: 800px;height: 800px;background: pink;}#toTop{width: 60px;height: 60px;background-color: pink;text-align: center;line-height: 30px;position: fixed;right: 10px;bottom: 10px;cursor: pointer;user-select: none;}/style
/head
bodydiv classwpdiv classcont滕王高阁临江飞羽阿打卡搭嘎含税单价br滕王高阁临江飞羽阿打卡搭嘎含税单价br滕王高阁临江飞羽阿打卡搭嘎含税单价br滕王高阁临江飞羽阿打卡搭嘎含税单价br滕王高阁临江飞羽阿打卡搭嘎含税单价br滕王高阁临江飞羽阿打卡搭嘎含税单价br滕王高阁临江飞羽阿打卡搭嘎含税单价br滕王高阁临江飞羽阿打卡搭嘎含税单价br滕王高阁临江飞羽阿打卡搭嘎含税单价br滕王高阁临江飞羽阿打卡搭嘎含税单价br滕王高阁临江飞羽阿打卡搭嘎含税单价br滕王高阁临江飞羽阿打卡搭嘎含税单价br滕王高阁临江飞羽阿打卡搭嘎含税单价br滕王高阁临江飞羽阿打卡搭嘎含税单价br滕王高阁临江飞羽阿打卡搭嘎含税单价br/div/divbutton idbtn点击获取卷上去的高度/buttondiv styleheight: 2000px;/divspan idtoTop回到 br 顶部/span
/body
/html
script/*scrollWidth滚动尺寸 返回值当子级元素内容宽度大于 目标元素内容宽度的时候那么scrollWidth子级盒模型的宽度左右padding 当子级元素内容宽度小于目标元素内容的时候scrollWidth width 左右paddingscrollHeight 和 scrollWidth一致scrollTop 垂直滚动条与元素顶部距离可以理解为元素内容被卷上去的高度可以设置该值scrollLeft 水平滚动条与元素左边距离可以理解为元素内容被卷到左边的宽度可以设置该值*/let wp document.querySelector(.wp) let btn document.querySelector(#btn)console.log(wp.scrollWidth,wp.scrollHeight,wp.scrollTop);btn.onclickfunction(){wp.scrollTop 400;console.log(wp.scrollTop);}//回到顶部let timmer;let totop document.querySelector(#toTop)toTop.onclick function(){//首先获取卷上去的高度clearInterval(timmer)timmer setInterval(function(){let h document.documentElement.scrollTop;console.log(h);if(h0){h-100;document.documentElement.scrollTop h;}else{document.documentElement.scrollTop 0;clearInterval(timmer)}},20);}
/script
案例要理解
1.缓慢回到顶部
效果图 相关代码代码较长且注释比较详细不在逐行讲解重点掌握实现的思路和对知识点的运用
!DOCTYPE html
html
headtitle回到顶部/titlestyle#backToTop {position: fixed;bottom: 20px;right: 20px;width: 50px;height: 50px;background-color: #333;color: #fff;font-size: 20px;text-align: center;line-height: 50px;cursor: pointer;opacity: 0.7;transition: opacity 0.3s;}#backToTop:hover {opacity: 1;}.wp{height: 3000px;width: 1200px;background-color: pink;}/style
/head
bodydiv idcontent!-- Your page content here --pLorem ipsum dolor sit amet, consectetur adipiscing elit./p!-- ... --/divdiv classwp/divdiv idbackToTop^/divscript// 获取“回到顶部”按钮元素var btn document.getElementById(backToTop);// 添加点击事件监听btn.addEventListener(click, function() {// 获取当前滚动位置var scrollTop document.documentElement.scrollTop || document.body.scrollTop;// 定义一个动画函数function scrollToTop() {// 计算每一帧滚动的距离var scrollStep Math.max(scrollTop / 30, 10);// 获取当前滚动位置var currentScrollTop document.documentElement.scrollTop || document.body.scrollTop;// 如果还没有到达顶部则继续滚动if (currentScrollTop 0) {// 计算下一帧的滚动位置var newScrollTop currentScrollTop - scrollStep;// 设置滚动位置document.documentElement.scrollTop newScrollTop;document.body.scrollTop newScrollTop;// 使用 setTimeout 调用下一帧滚动setTimeout(scrollToTop, 10);}}// 启动滚动动画scrollToTop();});// 监听页面滚动事件控制按钮的显示与隐藏window.addEventListener(scroll, function() {var scrollTop document.documentElement.scrollTop || document.body.scrollTop;if (scrollTop 300) {btn.style.display block;} else {btn.style.display none;}});/script
/body
/html
2.懒加载会单独写一篇文章来讲 对于懒加载的内容我会单独写一篇文章进行详细介绍以便更好地解释懒加载的概念、原理和使用方法并综合使用DOM尺寸的情况进行说明。期待您的关注和期待在文章完成后我将很高兴为您提供反馈或帮助。谢谢
