zoukankan html css js c++ java

前端页面获取各类页面尺寸及坐标尺寸总结

前端开发过程中,我们时常需要获取页面及视口的相关高度,来实现一些定位、布局和滚动效果，下面总结了一些高度和宽度的获取方式，供大家参考：

1.获取页面滚动条移动的距离

页面的水平滚动距离----> document.body.scrollLeft;
页面的垂直滚动距离----> document.body.scrollTop;

特殊情况:
　　有时候发现document.body.scrollTop一直是0，是页面DTD的问题影响的，页面指定了DTD，即指定了DOCTYPE时（<!DOCTYPE html>），使用document.documentElement。页面没有DTD，即没指定DOCTYPE时，使用document.body。IE和Firefox都是如此。

2.获取页面实际的高度和宽度

页面的高度----> document.documentElement.offsetHeight;
页面的宽度----> document.documentElement.offsetwidth;

3.浏览器渲染视口的高度和宽度
  
视口的高度----> window.innerHeight;
视口的宽度----> window.innerWidth;

4.获取页面元素实际的高度和宽度

元素的高度----> Element.offsetHeight;
元素的宽度----> Element.offsetWidth;

5.获取页面元素相对于视口左上角的坐标值

元素相对于视口左上角的横坐标----> Element.getBoundingClientRect().left;
元素相对于视口左上角的纵坐标----> Element.getBoundingClientRect().top;

6.获取页面元素相对于网页（body）左上角的坐标值

元素相对于网页左上角的横坐标----> Element.getBoundingClientRect().left + document.body.scrollLeft;
元素相对于网页左上角的纵坐标----> Element.getBoundingClientRect().top + document.body.scrollTop;

// 部分jQuery函数
$(window).height() 　//浏览器时下窗口可视区域高度
$(document).height()　　　　//浏览器时下窗口文档的高度
$(document.body).height()　　　　　　//浏览器时下窗口文档body的高度
$(document.body).outerHeight(true)　//浏览器时下窗口文档body的总高度包括border padding margin
$(window).width() 　//浏览器时下窗口可视区域宽度
$(document).width()//浏览器时下窗口文档对于象宽度
$(document.body).width()　　　　　　//浏览器时下窗口文档body的高度
$(document.body).outerWidth(true)　//浏览器时下窗口文档body的总宽度包括border padding

查看全文

相关阅读:
ImageMagick出错/undefined in findresource
只对目录更改权限的办法（xarg）
关于linux下php环境
 php 上传大文件
 做下载系统时的一些HTML文件头
 POJ 1694 An Old Stone Game ★(排序+树+递归)
POJ 1991 Turning in Homework ★(区间DP)
POJ 2452 Sticks Problem ★ (单调栈+RMQ)
HDU 2069 Coin Change (母函数)
HDU 2069 Coin Change (母函数)

原文地址：https://www.cnblogs.com/cassiel/p/7866521.html