JavaScript常用获取宽高的方法

标签：

知识点：

• document.documentElement.scrollTop（滚动条顶端位置，支持ie、ff）
• document.body.scrollTop（滚动条顶端位置，支持chrome）

• document.documentElement.clientWidth（浏览器视口宽度）
• document.documentElement.clientHeight（浏览器视口高度）
• document.body.clientWidth（浏览器视口宽度）
• document.body.clientHeight（浏览器视口高度）

• document.documentElement.scrollWidth（获取页面的宽度）
• document.documentElement.scrollHeight（获取页面的高度）
• document.body.scrollWidth（获取页面的宽度）
• document.body.scrollHeight（获取页面的高度）

• document.getElementById("box").offsetWidth（获取元素的宽度）
• document.getElementById("box").offsetHeight（获取元素的高度）

以顶部的距离为例：

1、没有文档声明（已废弃使用）的情况下：

标准与非标准浏览器都认识document.documentElement.scrollTop和document.body.scrollTop

2、有文档声明（即网页第一句的docType）的情况下：

标准浏览器只认识document.documentElement.scrollTop，而不认识document.body.scrollTop

但是chrome虽然我感觉比firefox还标准，但却不认识这个，在有文档声明时，chrome也只认识document.document.body.scrollTop。这就出现了一种技巧性的兼容方法，把两个加起来：

var oSTop=document.documentElement.scrollTop+document.body.scrollTop;

其他的类似，这个小技巧很使用，但是与宽有关的不需要加起来，并且习惯使用规范的document.documentElement.xxxxWidth。

JavaScript常用获取宽高的方法

标签：

原文地址：http://www.cnblogs.com/xiaoky/p/4021937.html