读取网页中涉及到的高度

TerryCai 发布于2019-08-19 17:18 / 1798人阅读

摘要：目前已经总结的有将来准备看的有有关控制滚动的该属性是一个只读属性，返回一个代表像素高度的整数值，高度包括元素高度内边距和边框。

目前已经总结的有

offsetHeight
offsetTop
clientHeight
clientTop
scrollHeight
scrollTop
innerHeight
outerHeight

将来准备看的有

有关控制滚动的

Element.offsetHeight

该属性是一个只读属性，返回一个代表像素高度的整数值，高度包括元素高度、内边距和边框。

如果该元素底部有水平滚动条的话，滚动条的高度也是被计算在内的（滚动条高度是从元素高度中减除的）

忽略任何应用在该元素或其祖先元素的transform属性带来的变化

Element.clientHeight

该属性是一个只读属性，返回一个代表像素高度的整数值，高度包括元素高度、内边距。

如果该元素底部有水平滚动条的话，滚动条的高度是不被计算在内的

如果调用元素为inline元素，返回0

Element.scrollHeight

该属性是一个只读属性，返回该元素实际的上内边距、下内边距和内容高度之和

window.innerHeight

该属性为只读属性，返回浏览器窗口视口高度，如果存在水平滚动条，也包括在内

window.outerHeight

该属性为只读属性，返回整个浏览器的高度

Element.offsetTop

该属性是一个只读属性，返回返回当前元素相对于其 offsetParent 元素内边距顶部的距离

如果其offsetParent元素为null，则为到根元素外边框顶部的距离

如果将offsetParent元素为body，则为到body元素外边框顶部的距离

以下是和offsetTop属性密切相关的offsetParent属性：

Element.offsetParent

该属性是一个只读属性，返回最近的一个包含调用元素的已定位元素(即position属性不为static)，如果没有定位元素，则为根元素或者table、th及td元素。

如果调用元素为html、body，返回null

如果调用元素的position属性为fixed，返回null（webkit内核浏览器、IE7+）

如果调用元素的display属性none，返回null（webkit内核浏览器、Firefox）

Element.clientTop

该属性是一个只读属性，通常情况下会返回border-top-width，但是如果有滚动条出现在上边框顶部和上内边距顶部之间，也应该加上滚动条的高度

Element.scrollHeight

该属性是一个可读/写的属性，读模式下返回元素目前距自身容器顶部（包括padding）的距离

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78399.html

关于CSS和JS中用到的各种Height和Width的问题

摘要：如果块级元素没有设置高度，则返回实际高度。如果有水平滚动条，还要减去水平滚动条的高度。一般来说，大于整张网页的总高度可以从或上读取。有关坐标的属性返回鼠标事件触发时鼠标相对于元素视口的坐标。自己记不住,列一下关于CSS和JS中用到的各类有关Height和Width属性的介绍对比. 所属类别属性名意义其他浏览器模型 Screen.height 浏览器窗口所在的屏幕的高度（单位像素） ...

shiina 2019-04-23 13:08 评论0 收藏0
Android的WebView的使用及JS调用

摘要：不使用缓存，只从网络获取数据，只要本地有，无论是否过期，或者，都使用缓存中的数据。这个方法，就是界面的加载开始，可以在这里设置一个加载的引导动画，使得客户体验更好在页面加载结束时调用。销毁，关闭了时，音乐或视频，还在播放。如果本文帮助到你，本人不胜荣幸，如果浪费了你的时间，本人深感抱歉，希望能对您所有帮助！随着H5的应用越来越潮流，与原生交互必然也是一种趋势，然后自己从中学点皮毛...

weapon 2019-08-21 11:34 评论0 收藏0
用Vue开发仿旅游站webapp项目总结（上）

摘要：写着写着发现会写不少内容全部写在一篇文章里感觉太多了不方便看，所以分为上下篇吧下篇写完啦，感兴趣的朋友可以继续关注开发仿旅游站项目总结下温馨提示此文章，仅是做完项目后的个人觉得可以总结下来的操作思路，接触不久的朋友应该会有收获。写着写着发现会写不少内容... 全部写在一篇文章里感觉太多了不方便看，所以分为上下篇吧...下篇写完啦，感兴趣的朋友可以继续关注 => Vue开发仿旅游站we...

church 2019-08-23 13:11 评论0 收藏0
用Vue开发仿旅游站webapp项目总结（上）

摘要：写着写着发现会写不少内容全部写在一篇文章里感觉太多了不方便看，所以分为上下篇吧下篇写完啦，感兴趣的朋友可以继续关注开发仿旅游站项目总结下温馨提示此文章，仅是做完项目后的个人觉得可以总结下来的操作思路，接触不久的朋友应该会有收获。写着写着发现会写不少内容... 全部写在一篇文章里感觉太多了不方便看，所以分为上下篇吧...下篇写完啦，感兴趣的朋友可以继续关注 => Vue开发仿旅游站we...

masturbator 2019-08-29 17:16 评论0 收藏0