关于元素的一些属性

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

• 尺寸相关：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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 如何用HTML+CSS制作一个分层金字塔，具体方法是什么

  最近才自学了html和css，今天正好做个金字塔实例，可以清楚的看出图标数据，需要的朋友们下面随着小编来一起学习学习吧

• CSS粘性定位是怎样的，如何应用呢？

  CSS粘性定位是怎样的，如何应用呢？下文有实例供大家参考，对大家了解操作过程或相关知识有一定的帮助，而且实用性强，希望这篇文章能帮助大家，下面我们一起来了解看看吧。

• 在CSS中应用inline-block出现的元素间间距怎样去掉

  真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：<input/><inputtype="submit"/>间距就来了~~我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题：.spacea{display:inline-block;padding:.5em1em;background-color:#cad5eb;}<divclass="space"><ahre ...

• CSS3实现文字渐变的方法有几种，代码是什么

  这篇文章主要介绍了CSS3下的渐变文字效果实现示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

• CSS float属性是怎样实现元素的左右浮动效果的

  本篇文章给大家带来了关于css的相关知识，其中主要介绍了float属性控制div左右浮动的相关问题，浮动，顾名思义，就是漂浮的意思。指的是一个元素脱离文档流，悬浮在父元素之上的现象，下面一起来看一下，希望对大家有帮助。