javascript中如何使用offsetWidth、clientWidth innerWidth及相关属性

　　介绍

这篇文章主要讲解了javascript中如何使用offsetWidth, clientWidth, innerWidth及相关属性,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

关于js中的offsetWidth, clientWidth, scrollWidth等一系列属性及其方法一直都傻傻分不清,这里就来总结一下这些方法的用法和含义。

<强>一、clientWidth和clientHeigh, clientTop和clientLeft

1, clientWidth的实际宽度
clientWidth=,宽度+左右填充

2, clientHeigh的实际高度
clientHeigh=身高+上下padding 

3, clientTop的实际宽度
clientTop=boder.top(上边框的宽度)

4, clientLeft的实际宽度
clientLeft=boder.left(左边框的宽度)

<强>二,offsetWidth和offsetHight,, offsetTop和offsetLeft

1, offsetWidth的实际宽度
offsetWidth=宽度+左右填充+左右边界

2, offsetHeith的实际高度
offsetHeith=身高+上下填充+上下边界

3, offsetTop实际宽度
offsetTop:当前元素上边框外边缘到最近的已定位父级(offsetParent)上边框内边缘的距离。如果父级都没有定位,则分别是到身体顶部和左边的距离

4, offsetLeft实际宽度
offsetLeft:当前元素左边框外边缘到最近的已定位父级(offsetParent)左边框内边缘的,,,,,,,,,,,距离。如果父级都没有定位,则分别是到身体顶部和左边的距离

<强>三,scrollWidth和scrollHeight, scrollTop和scrollLeft

1, scrollWidth实际宽度
scrollWidth:获取指定标签内容层的真实宽度(可视区域宽度+被隐藏区域宽度)。

2, scrollHeight的实际高度
scrollHeight:获取指定标签内容层的真实高度(可视区域高度+被隐藏区域高度)

3, scrollTop
scrollTop:内容层顶部到可视区域顶部的距离。
实例:var scrollTop=document.documentElement。scrollTop | |窗口。pageYOffset | | document.body.scrollTop;持续获取高度的方式:

window.addEventListener(& # 39;滚动# 39;()=祝辞{ 　　var scrollTop=document.documentElement。scrollTop | |窗口。pageYOffset | | document.body.scrollTop; 　　});

4, scrollLeft
scrollLeft:内容层左端到可视区域左端的距离。

下面元素属性和元素方法都通过elem。属性或初步的。方法的方式使用,窗口属性通过窗户。属性的方式使用,文档属性则通过文档调用。

& lt; script>/* 　　* * * * * *元素视图属性 　　* offsetWidth水平方向宽度+左右填充+左右边框宽度 　　* offsetHeight垂直方向高度+上下填充+上下边框宽度 　　* 　　* clientWidth水平方向宽度+左右填充 　　* clientHeight垂直方向高度+上下填充 　　* 　　* offsetTop获取当前元素到定位父节点的顶方向的距离 　　* offsetLeft获取当前元素到定位父节点的离开方向的距离 　　* 　　* scrollWidth元素内容真实的宽度,内容不超出盒子高度时为盒子的clientWidth 　　* scrollHeight元素内容真实的高度,内容不超出盒子高度时为盒子的clientHeight 　　* 　　* * * * * *元素视图属性结束 　　* 　　* * * * * *窗口视图属性(低版本IE浏览器[& lt; IE9]不支持)【自测包含滚动条,但网络教程都说不包含? ? ?】 　　* innerWidth浏览器窗口可视区宽度(不包括浏览器控制台,菜单栏,工具栏) 　　* innerHeight浏览器窗口可视区高度(不包括浏览器控制台,菜单栏,工具栏) 　　* * * * * *窗口视图属性结束 　　* 　　* * * * * *文档文档视图 　　*(低版本IE的innerWidth, innerHeight的代替方案) 　　* document.documentElement。clientWidth浏览器窗口可视区宽度(不包括浏览器控制台,菜单栏,工具栏,滚动条) 　　* document.documentElement。clientHeight浏览器窗口可视区高度(不包括浏览器控制台,菜单栏,工具栏,滚动条) 　　* 　　* document.documentElement。offsetHeight获取整个文档的高度(包含身体的保证金) 　　* document.body。offsetHeight获取整个文档的高度(不包含身体的保证金) 　　* 　　* document.documentElement。scrollTop返回文档的滚动顶方向的距离(当窗口发生滚动时值改变) 　　* document.documentElement。scrollLeft返回文档的滚动离开方向的距离(当窗口发生滚动时值改变) 　　* * * * * *文档文档视图结束 　　* 　　* * * * * *元素方法 　　* 1。getBoundingClientRect()获取元素到身体 　　*底:元素底边(包括边境)到可视区最顶部的距离 　　*左:元素最左边(不包括边境)到可视区最左边的距离 　　*正确的:元素最右边(包括边境)到可视区最左边的距离 　　*:元素顶边(不包括边境)到可视区最顶部的距离 　　*高度:元素的offsetHeight 　　*宽度:元素的offsetWidth 　　* x:元素左上角的x坐标 　　* y:元素左上角的y坐标 　　* 　　* 2。scrollIntoView()让元素滚动到可视区 　　* 　　* * * * * *元素方法结束 　　* 　　*/& lt;/script>

javascript中如何使用offsetWidth、clientWidth innerWidth及相关属性