A-A+

javascript获取元素位置/窗口高度代码

2016年02月19日 web前端设计 暂无评论 阅读 5 views 次

在js中获取元素位置/窗口高度只要用于的clientHeight和clientWidth属性即可实现,只是后面有些不同浏览器的兼容性了,下面我来一一介绍.

document元素的clientHeight和clientWidth属性,就代表了网页的大小,代码如下:

  1. function getViewport(){  
  2.   if (document.compatMode == "BackCompat"){  
  3.     return {  
  4.       width: document.body.clientWidth,  
  5.       height: document.body.clientHeight  
  6.     }  
  7.   } else {  
  8.     return {  
  9.       width: document.documentElement.clientWidth,  
  10.       height: document.documentElement.clientHeight  
  11.     }  
  12.   }  
  13. }  

上面的getViewport函数就可以返回浏览器窗口的高和宽.

有三个地方需要注意:

1)这个函数必须在页面加载完成后才能运行,否则document对象还没生成,浏览器会报错。

2)大多数情况下,都是document.documentElement.clientWidth返回正确值。但是,在IE6的quirks模式中,document.body.clientWidth返回正确的值,因此函数中加入了对文档模式的判断。

3)clientWidth和clientHeight都是只读属性,不能对它们赋值。

获取网页元素的绝对位置

下面两个函数可以用来获取绝对位置的横坐标和纵坐标,代码如下:

  1. function getElementLeft(element){  
  2.   var actualLeft = element.offsetLeft;  
  3.   var current = element.offsetParent;  
  4.   while (current !== null){  
  5.     actualLeft += current.offsetLeft;  
  6.     current = current.offsetParent;  
  7.   }  
  8.   return actualLeft;  
  9. }  
  10. function getElementTop(element){  
  11.   var actualTop = element.offsetTop;  
  12.   var current = element.offsetParent;  
  13.   while (current !== null){  
  14.     actualTop += current.offsetTop;  
  15.     current = current.offsetParent;  
  16.   }  
  17.   return actualTop;  
  18. }  

由于在表格和iframe中,offsetParent对象未必等于父容器,所以上面的函数对于表格和iframe中的元素不适用.

一些获取元素位置/窗口高度代码

在IE中:

document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

在FireFox中:

document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

在Opera中:

document.body.clientWidth ==> 可见区域宽度

document.body.clientHeight ==> 可见区域高度

document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)

document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

而如果没有定义W3C的标准,则

IE为:

document.documentElement.clientWidth ==> 0

document.documentElement.clientHeight ==> 0

FireFox为:

document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

Opera为:

document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊.

标签:

给我留言