页面位置
Posted tuhazi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了页面位置相关的知识，希望对你有一定的参考价值。
// 定位父级offsetParent的定义是：与当前元素最近的经过定位(position不等于static)的父级元素
// 偏移量：offsetTop,offsetHeight,offsetWidth,offsetLeft
// offsetTop表示元素的上外边框至offsetParent元素的上内边框之间的像素距离
// 偏移：offsetWidth = width + padding-left + padding-right + border*2 （如有滚动条 则加上滚动条宽度） 客户端：clientWidth = width + padding-left + padding--right
// clientTop 和 clientLeft 为border的宽度（块级元素） 为行内元素则为0
// E8-浏览器下如果使用currentStyle()方法获取<html>和<body>(甚至普通div元素)的边框宽度都是medium，而如果使用clientLeft(或clientTop)获取边框宽度，则是实际的数值
// scrollHeight表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分
// document.documentElement.clientHeight表示页面的可视区域的尺寸，而document.documentElement.scrollHeight表示html元素内容的实际尺寸。
// 兼容：var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
// var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
// scrollTop属性表示被隐藏在内容区域上方的像素数
// scrollTop的兼容：var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop
// 回到顶部：function scrollTop(){
// if((document.body.scrollTop || document.documentElement.scrollTop) != 0){
// document.body.scrollTop = document.documentElement.scrollTop = 0;
// }
// }
// Element.getBoundingClientRect().width = border-left-width + padding-left + width + padding-right + border-right-width
// Element.getBoundingClientRect().height = border-top-width + padding-top + height + padding-bottom + border-bottom-width
// top: 元素顶部相对于视口的纵坐标
// left: 元素左边界相对视口的横坐标
// right: 元素右边界相对视口的横坐标
// bottom:元素底部相对于视口的纵坐标
// bottom = top + height
// right = left + width
//
以上是关于页面位置的主要内容，如果未能解决你的问题，请参考以下文章