| 位置 |
javascript
|
jquery
|
兼容性 |
|
窗口位置離屏幕左
偏移
|
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; | 瀏覽器兼容性問題可能不准確,建議用moveTo | |
|
窗口位置
離屏幕
上偏移
|
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY; |
瀏覽器兼容性問題可能不准確,建議用moveTo
|
|
|
窗口定位到某位置
|
window.moveTo(0,0) | Opera及IE7+默認禁用,且不適用於框架 | |
|
窗口定位相對位置
|
window.moveBy(50,50) |
Opera及IE7+默認禁用,且不適用於框架
|
|
| 窗口調整大小1 | window.resizeTo(100,100) | ||
| 窗口調用大小2 | window.resizeTBy(100,50) | ||
| 頁面視口大小 | var pageWidth = window.innerWidth, pageHeight = window.innerHeight; if (typeof pageWidth != "number"){ if (document.compatMode == "CSS1Compat"){ pageWidth= document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else { pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; } } |
$(window).width() $(window).height() |
|
| 元素距頁面頂部偏移量 | function getElementTop(element){ var actualTop = element.offsetTop; var current = element.offsetParent; while (current !== null){ actualTop += current.offsetTop; current = current.offsetParent; } return actualTop; } |
$(element).offset().top | js為遞歸計算,只對可見元素有效 |
| 元素距頁面左側偏移量 | function getElementLeft(element){ var actualLeft = element.offsetLeft; var current = element.offsetParent; while (current !== null){ actualLeft += current.offsetLeft; current = current.offsetParent; } return actualLeft; } |
$(element).offset().left
|
js為遞歸計算,
只對可見元素有效
|
| 元素在垂直方向上占用空間(含邊框+內邊距+滾動條) | element.offsetHeight | $(element).outerHeight(), | |
|
元素在水平方向上占用空間(含邊框+內邊距+滾動條)
|
element.offsetWidth | $(element).outerWidth(), | |
|
元素在垂直方向上占用空間(不含邊框,滾動條只含內邊距)
|
element.clientHeight
|
$(
element).height(),有區別,不含內邊距
|
|
|
元素在水平方向上占用空間(不含邊框,滾動條,只含內邊距)
|
element.clientWidth
|
$(
element).width(),有區別,不含內邊距
|
|
| 在沒有滾動條時,元素內容總高度 |
element.scrollHeight
|
jquery未找到對應方法
|
var docHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight); |
|
在沒有滾動條時,元素內容總寬度
|
element.scrollWidth
|
jquery未找到對應方法 | var docWidth = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth); |
| 已被滾動卷去的上方像素 |
var top = document.body.scrollTop | document.documentElement.scrollTop;
|
$(document).scrollTop()
|
可以用此方法滾動到指定位置 |
|
已被滾動卷去的左方像素
|
var left = document.body.scrollLeft | document.documentElement.scrollLeft;
|
$(document).scrollLeft()
|
可以用此方法滾動到指定位置
|
| 兼容所有瀏覽器, 取得元素矩陣,返回 元素左上角坐標距 視窗口的 left,top,right,bottom值 |
function getElementLeft(element){ var actualLeft = element.offsetLeft; var current = element.offsetParent; while (current !== null){ actualLeft += current.offsetLeft; current = current.offsetParent; } return actualLeft; } function getElementTop(element){ var actualTop = element.offsetTop; var current = element.offsetParent; while (current !== null){ actualTop += current. offsetTop; current = current.offsetParent; } return actualTop; } function getBoundingClientRect(element){ var scrollTop = document.documentElement.scrollTop; var scrollLeft = document.documentElement.scrollLeft; if (element.getBoundingClientRect){ if (typeof arguments.callee.offset != "number"){ var temp = document.createElement("div"); temp.style.cssText = "position:absolute;left:0;top:0;"; document.body.appendChild(temp); arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop; document.body.removeChild(temp); temp = null; } var rect = element.getBoundingClientRect(); var offset = arguments.callee.offset; return { left: rect.left + offset, right: rect.right + offset, top: rect.top + offset, bottom: rect.bottom + offset }; } else { var actualLeft = getElementLeft(element); var actualTop = getElementTop(element); return { left: actualLeft - scrollLeft, right: actualLeft + element.offsetWidth - scrollLeft, top: actualTop - scrollTop, bottom: actualTop + element.offsetHeight - scrollTop } } } |
||