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

查看全文

相关阅读:
STL之map UVa156
STL之vector UVa101
STL之set UVa10815
无修改区间查询 BNU Can you answer these queries I
区间修改点查询 HDU1556
无废话ExtJs 入门教程九[数字字段：NumberField、隐藏字段Hidden、日期字段：DataFiedl]
无废话ExtJs 入门教程七[登陆窗体Demo：Login]
无废话ExtJs 入门教程六[按钮：Button]
无废话ExtJs 入门教程五[文本框：TextField]
无废话ExtJs 入门教程四[表单：FormPanel]

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