获取滚动条x轴与y轴的距离
function getScrollOffset() {
if(window.pageXOffset) {
return {
x : window.pageXOffset,
y : winodw.pageYOffset
}
}else{
return {//兼容IE之前版本
x : document.body.scrollLeft + document.documentElement.scrollLeft,
y : document.body.scrollTop + document.documentElement.scrollTop
}
}
}
<!DOCTYPE html>
加上<!DOCTYPE html>为标准模式，不加为怪异模式/混杂模式
怪异模式为了向后（版本）兼容
获取可视窗口的大小
function getViewportOffset() {
if(window.innerWidth) {
return {
w : window.innerWidth,
h : window.innerHeight
}
}else{
if(document.compatMode === "BackCompat") {
return {
w : document.body.clientWidth,
h : document.body.clientHeight
}
}else{
return {
w : document.documentElement.clientWidth,
h : document.documentElement.clientHeight
}
}
}
}
查看元素的尺寸
dom.offsetWidth, dom.offsetHeight
查看元素的位置
dom.offsetLeft, dom.offsetTop
对于无定位父级的元素，返回相对文档的坐标。
对于有定位父级的元素，返回相对于最近的有定位的父级的坐标。
返回最近有定位的父级
dom.offsetParent
让滚动条滚动
- window上有三个方法
- scroll(),scrollTo() ,scrollBy();
- 三个方法类似，将x，y坐标传入，即实现让滚动条滚动到当前位置。
- 区别：scrollBy()会在之前的数据基础上做累加。
获取元素的样式
function getStyle(elem,prop) {
if(window.getComputedStyle) {
return window.getComputedStyle(elem,null)[prop];
}else{//兼容IE
return elem.currentStyle[prop];
}
}
