獲取滾動條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坐標傳入,即實現(xiàn)讓滾動條滾動到當前位置皮仁。
- 區(qū)別:scrollBy()會在之前的數(shù)據(jù)基礎上做累加籍琳。
獲取元素的樣式
function getStyle(elem,prop) {
if(window.getComputedStyle) {
return window.getComputedStyle(elem,null)[prop];
}else{//兼容IE
return elem.currentStyle[prop];
}
}