首页 > 技术文章 > 页面位置

tutao1995 2018-10-23 17:51 原文

//   定位父级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
//

推荐阅读