关于元素的一些属性

在前端的日常开发中，我们经常无可避免的需要获取或者监听一些页面的属性，那么我们需要经常了解一些属性代表的含义才能更好地使用这些属性。特别是一下这些：

• 尺寸相关：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高度之和 + 自身padding；

window.innerHeight: (浏览器窗口高度，不包含工具栏，菜单等，仅仅是可视区域dom的height)
window.outerHeight: (浏览器窗口高度，包含工具栏、菜单等,整个浏览器的height)

关于偏移：

offsetTop：只读属性，返回元素距离最近一个相对定位的父元素内边线的顶部距离，实际使用时可能存在不同样式引起的相对定位父元素不一致的兼容性问题。
clientTop：上边框的宽度
scrollTop：

• 对于滚动元素而言，就是已经滚动的距离，
• 对于html而言，就是window.scrollY

window.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.offsetTop
      let current = element.offsetParent

      while (current !== null) {
        actualTop += current.offsetTop
        current = 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;
}

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用css3怎样给歌词文字左到右填充颜色？

  经常听歌的朋友应该都有留意的，一般歌词的进度会跟着音乐的进度滚动显示，而一些歌词还有填充颜色的效果，那么给文字填充颜色的效果是怎样做的呢？下面我们就来看看用css3实现随进度歌词文字左到右填充颜色的示例。

• 基于HTML5如何给网站添加黑暗模式

  这篇文章主要介绍了详解HTML5如何使用可选样式表为网站或应用添加黑暗模式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• 在CSS3中元素向左偏移的效果怎么实现

  在css中，向左偏移的样式是“transform:translate(-向左偏移距离值);”；transform属性的作用是允许我们对元素进行旋转、缩放、移动或倾斜操作，translate()函数的作用是定义元素的平移转换。

• 用CSS怎么实现鼠标悬停出现渐变的效果

  这篇文章主要介绍了使用CSS变量实现炫酷惊人的悬浮效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧

• CSS中让背景图片铺满且自适应的效果怎样做的

  一张清晰漂亮的背景图片能给网页加分不少，设计师也经常会给页面的背景使用大图，我们既不想图片因为不同分辨率图片变形，也不希望当在大屏的情况下，背景有一块露白，简而言之，就是实现能自适应屏幕大小又不会变形的背景大图，而且背景图片不会随着滚动条滚动而滚动。