如果想更好的了解offsetTop、offsetLeft、offsetWidth、offsetHeight，可以参考
http://www.cftea.com/c/2006/12/PCTKER6T0V62S854.asp
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-size: 12px;
}
#outter {
border: 10px solid black;
width: 800px;
height: 500px;
background-color: #B7CBE1;
margin: 10px;
padding: 10px;
}
#inner {
border: 10px solid red;
width: 400px;
height: 250px;
background-color: #03B3DE;
margin: 10px;
padding: 10px;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
jQuery(function() {
var parentT = jQuery("#outter")[0].offsetParent.offsetTop;
var outterT = jQuery("#outter")[0].offsetTop;
var innerT = jQuery("#inner")[0].offsetTop;
jQuery("#inner").append("parentT="+parentT+"(不包括边框)<br/>"
+ "outterT="+outterT+"(不包括边框)<br/>"
+ "innerT="+innerT+"(不包括边框)<br/><hr>");
var parentW = jQuery("#outter")[0].offsetParent.offsetWidth;
var outterW = jQuery("#outter")[0].offsetWidth;
var innerW = jQuery("#inner")[0].offsetWidth;
jQuery("#inner").append("parentW="+parentW+"(不包括滚动条宽度)<br/>"
+ "outterW="+outterW+"(包括边框)<br/>"
+ "innerW="+innerW+"(包括边框)<br/>");
});
</script>
</head>
<body>
<div id="outter">
<div id="inner">
这是内容<br/>
</div>
</div>
</body>
</html>
- 大小: 11.7 KB
分享到：
相关推荐
Javascript拖拽用到的一些关于位置定位的一些参数
实现拖拽功能 ，三个事件 mousemove , mouseup ,mousedown, 偏移量(offsetLeft, offsetTop , offsetWidth ,offsetHeight)，窗口坐标位置(clientX ,clientY ) 以及获取可视区域方法的兼容性处理。 之前做的比较多的...
在阅读本文前，可以先阅读《Javascript拖拽&拖放系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性》这篇文章，以理清上下文关系。好了，让我们开始进入正题。 模型相同的属性/方法 1 Button属性 ...
scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解 2009年12月14日，16:58:19 | ArthurXF ...(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素。 obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型，单位像素。 obj...
var height=e.offsetHeight; while(e=e.offsetParent) { t+=e.offsetTop; l+=e.offsetLeft; } } 假设 obj 为某个 HTML 控件。 obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。 obj.offsetLeft 指...
offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。 offsetTop 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。 offsetWidth 获取对
offsetWidth/offsetHeight——视觉大小：看得见的大小，不包括margin的元素的宽度或高度，只包括padding、border、水平滚动条的宽度或高度。 offsetTop/offsetLeft——当前元素的偏移量：当父级有定位，根据父级的...
var x = event.x-elm.offsetLeft; x=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w; zoomImg.style.marginLeft=(w-x)*zoomRate; var y = event.y-elm.offsetTop; y=y<(elm.offsetHeight-h)?y<h?h:y:elm....
offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以... offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。 scrollHeight: 获取对象的滚动
offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event....
maxWidth = smalmg.clientWidth - showimg.offsetWidth; maxHeight = smalmg.clientHeight - showimg.offsetHeight; //上面两个变量指明showimg允许活动的区域 }; smalmg.onmousemove = function(e){ e = e || ...
网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽)...
第一组：offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent 第二组：clientWidth,clientHeight,clientLeft,clientTop 第三组：scrollWidth,scrollHeight,scrollLeft,scrollTop 详细定义如下： ...
clientX=A.offsetLeft()+B.offsetLeft+1/2*A.offsetWidth; clientY=A.offsetTop()+B.offsetTop+1/2*A.offsetHeight; 鼠标移动过程中:放大镜A和大图D是一起随鼠标成比例运动的，因为当放大镜A的右边框移动到与小图B的...
JS获取元素的offsetTop,offsetLeft等属性 obj.clientWidth //获取元素的宽度 obj.clientHeight //元素的高度 obj.offsetLeft //元素相对于父元素的left obj.offsetTop //元素相对于父元素的top obj.offsetWidth //...
javascript中可以通过四个属性获得元素的偏移量，offsetHeight、offsetWidth、offsetLeft、offsetTop，下面为大家解释下各属性的含义
1.offsetTop :当前对象到其上级层顶部的距离.不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性. 2.offsetLeft :当前对象到其上级层左边的距离.不能对其进行赋值.设置对象到页面左部的距离请用style....
本文实例讲述了js实现交换运动效果的方法。分享给大家供大家参考。具体分析如下： ... 要点一： ...var w = now.offsetWidth; var h = now.offsetHeight; var l = now.offsetLeft; var t = now.offsetTop; var