| 位置 |
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 } } } |
||
