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