详解html元素的四大属性

今天分享下”详解html元素的四大属性“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧

有关元素的一些属性
在前面的日常开发设计中，大家常常在所难免的必须获得或是监视一些网页页面的属性，那麼大家必须常常掌握一些属性意味着的含意才可以更好的应用这种属性。尤其是一下这种：
规格有关：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，根节点早已竖直翻转的间距
开发设计中常需的相应数据信息
获得全部网页的可视区高度：【不用可视区外的高度】

1
2
3
const height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
获取整个页面的高度：【包括可视区外的】

1
2
const height = document.documentElement.offsetHeight
|| document.body.offsetHeight;
获取整个页面的垂直滚动高度：

1
2
const scrollTop = document.documentElement.scrollTop
|| document.body.scrollTop;
获取元素相对根节点顶部的距离：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 对于相对于根节点定位的元素
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"http://www.qlyl1688.com/products/zkcxg.html"

}

// 还有一中方法 滚动距离 + 距离视口上边距
const top = Element.getBoundingClientRect().top + window.scrollY；
获取元素相对可视区域顶部距离：

1
const top = Element.getBoundingClientRect().top;
设置整个页面的垂直滚动位置：

1
2
3
4
5
6
const isCSS1Compat = ((document.compatMode || “”) === “CSS1Compat”);
if (isCSS1Compat) {
document.documentElement.scrollTop = 100;
} else {
document.body.scrollTop = 100;
}
今天关于详解html元素的四大属性的文章就介绍到这了,感谢大家观看，下次再见！！