建邺html5响应式网站,ui设计师mike个人网站,广州11个区排名,旅游网站开发需求分析目的关于元素的一些属性在前端的日常开发中#xff0c;我们经常无可避免的需要获取或者监听一些页面的属性#xff0c;那么我们需要经常了解一些属性代表的含义才能更好地使用这些属性。特别是一下这些#xff1a;尺寸相关#xff1a;offsetHeight、clientHeight、scrollHeight…关于元素的一些属性在前端的日常开发中我们经常无可避免的需要获取或者监听一些页面的属性那么我们需要经常了解一些属性代表的含义才能更好地使用这些属性。特别是一下这些尺寸相关offsetHeight、clientHeight、scrollHeight偏移相关offsetTop、clientTop、scrollTop、pageYOffset、scrollY获取相对视口位置Element.getBoundingClientRect()获取元素的style对象Window.getComputedStyle(Element)属性的定义关于尺寸相关的属性定义offsetHeight: Element.offsetHeight是一个只读属性返回的是元素对应的高度px的值是一个整数值不存在小数隐藏元素返回0其他返回元素的innerHeight padding border margin 滚动条但是不包括里面的::before or ::after伪元素clientHeight: Element.clientHeight是一个只读属性返回的是元素对应的高度px的值是一个整数值不存在小数对于没有设置样式或者inline元素而言返回的是0对于html元素或者怪异模式下的body返回的是viewport高度也就是整个页面视口高度其他情况下元素的innerHeight padding不包括border、margin、滚动条scrollHeight: 是一个只读属性返回的是元素对应的高度px的值是一个整数值不存在小数在子元素不存在滚动情况下和Element.clientHeight一样在子元素存在滚动情况下会是所以子元素的clientHeight高度之和 自身paddingwindow.innerHeight: (浏览器窗口高度不包含工具栏菜单等仅仅是可视区域dom的height)window.outerHeight: (浏览器窗口高度包含工具栏、菜单等,整个浏览器的height)关于偏移offsetTop只读属性返回元素距离最近一个相对定位的父元素内边线的顶部距离实际使用时可能存在不同样式引起的相对定位父元素不一致的兼容性问题。clientTop上边框的宽度scrollTop对于滚动元素而言就是已经滚动的距离对于html而言就是window.scrollYwindow.scrollY别名window.pageYOffset根节点已经垂直滚动的距离开发中所需的相关数据获取整个页面的可视区高度【不需要可视区外的高度】const height window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;获取整个页面的高度【包括可视区外的】const height document.documentElement.offsetHeight|| document.body.offsetHeight;获取整个页面的垂直滚动高度const scrollTop document.documentElement.scrollTop|| document.body.scrollTop;获取元素相对根节点顶部的距离// 对于相对于根节点定位的元素const top Element.offsetTop;// 对于非相对于根节点定位的元素需要循环获取getElementTop(element) {let actualTop element.offsetToplet current element.offsetParentwhile (current ! null) {actualTop current.offsetTopcurrent current.offsetParent}return actualTop}// 还有一中方法 滚动距离 距离视口上边距const top Element.getBoundingClientRect().top window.scrollY获取元素相对可视区域顶部距离const top Element.getBoundingClientRect().top;设置整个页面的垂直滚动位置const isCSS1Compat ((document.compatMode || ) CSS1Compat);if (isCSS1Compat) {document.documentElement.scrollTop 100;} else {document.body.scrollTop 100;}到此这篇关于详解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理的文章就介绍到这了,更多相关height、offsetHeight、clientHeight、scrollTop内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家
