js获取元素宽高及位置的几种方法、获取浏览器窗口大小

一.获取宽高：

1.行内样式获取宽高：

var dom= document.getElementById("div");

var divWidth = dom.style.width;
var divHeight = dom.style.height;

注：只能通过行内样式才能获取到。获取到的元素宽高不包括padding和border

2.offset方法获取：

var divOffsetWidth = dom.offsetWidth; //元素的宽度包含padding和border
var divOffsetHeight = dom.offsetHeight; //元素的高度包含padding和border

3.client方法获取：

var divClientWidth = dom.clientWidth; //元素的宽度包含padding不包含border
var divClientHeight = dom.clientHeight; //元素的高度包含padding不包含border

4.currentStyle方式（只支持IE）

dom.currentStyle.width/height; // 不包括padding和border

5.window.getComputedStyle(dom)方式（常用，兼容好）

window.getComputedStyle(dom).width/height; // 不包括padding和border

6.获取页面的宽高：

document.documentElement.scrollWidth;

document.documentElement.scrollHeight;

二.获取位置

1.offset方法：

var divOffsetLeft = dom.offsetLeft; //元素左部相对于父级元素左部的像素值
var divOffsetTop = dom.offsetTop; //元素顶部相对于父级元素顶部的像素值

var parent = dom.offsetParent; //元素的父级元素

var divClientLeft = dom.clientLeft; //元素的左边框宽度
var divClientTop = dom.clientTop; //元素的上边框宽度

2.获取鼠标的位置：

var divX = ev.clientX; //鼠标的x坐标
var divY = ev.clientY; //鼠标的y坐标

三.浏览器可视区域大小（不包括工具栏和滚动条）

1.IE9+、Chrome、Firefox、Opera 以及 Safari：

var winH1 = window.innerHeight;
var winW1 = window.innerWidth;

2.IE8、7、6、5：

var winH2 = document.documentElement.clientHeight;
var winW2 = document.documentElement.clientWidth;

或者

var winH3 = document.body.clientHeight;
var winW3 = document.body.clientWidth;

3.兼容性比较好的写法（注意书写顺序，不要写错了）

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

注：浏览器的可视区域大小是随浏览器窗口大小而变化的，所以这个值是变化的

四.screen方式获取窗口的大小（包含浏览器顶部的工具栏，不包含屏幕底部的任务栏）

var screenH = screen.availHeight;
var screenW = screen.availWidth;

注：这种方式获取的是屏幕的大小，这个不会随着浏览器窗口大小而变化，这个值是固定的