小虎博客

A-A+

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

2016年02月19日 编程技术 暂无评论

在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高）

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

标签：

给我留言