一.获取宽高:
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;
注:这种方式获取的是屏幕的大小,这个不会随着浏览器窗口大小而变化,这个值是固定的