html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

转自：https://blog.csdn.net/qq_27626333/article/details/52195467

TML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 
scrollHeight: 获取对象的滚动高度。 
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
scrollWidth:获取对象的滚动宽度 
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
event.clientX 相对文档的水平座标 
event.clientY 相对文档的垂直座标 
event.offsetX 相对容器的水平坐标 
event.offsetY 相对容器的垂直坐标 
document.documentElement.scrollTop 垂直方向滚动的值 
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

这里是JavaScript中建造迁移转变代码的常用属性
页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth   （包含边线的宽）;
网页可见区域高： document.body.offsetHeight （包含边线的宽）;
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文项目组上： window.screenTop;
网页正文项目组左： window.screenLeft;
屏幕辨别率的高： window.screen.height;
屏幕辨别率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;

1、假设 obj 为某个 HTML 控件

  obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。

  obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。

  obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。

  obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。

  我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。例如：

<div id="tool">
      <input type="button" value="提交">
      <input type="button" value="重置">
</div>

  “提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。

  “重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。

  “提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离，因为距其左边最近的是 “tool” 层的左边框。
  “重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离，因为距其左边最近的是“提交”按钮的右边框。
 

2、offsetTop 

  offsetTop可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：

 （1）、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
 （2）、offsetTop 只读，而 style.top 可读写。
 （3）、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

  offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。

 

3、clientHeight
      大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。
offsetHeight
   IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
   NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

scrollHeight
     IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
     NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。
简单地说：clientHeight 就是透过浏览器看内容的这个区域高度。NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。IE、Opera 认为offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。
同理clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

 

4、说明
  以上基于 DTD HTML 4.01 Transitional，如果是 DTD XHTML 1.0 Transitional 则意义又会不同，在 XHTML 中这三个值都是同一个值，都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器
scrollTop 是“卷”起来的高度值，示例：

 

<div style="width:100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p">
    <div style="width:50px;height:300px;background-color:#0000FF;" id="t">
        如果为 p 设置了 scrollTop，这些内容可能不会完全显示。
    </div>
</div>
<script type="text/javascript">
     var p = document.getElementById("p");
     p.scrollTop = 10;
</script>

 

  由于为外层元素 p 设置了 scrollTop，所以内层元素会向上卷，这卷起来的部分就是 scrollTop。
  scrollLeft 也是类似道理。我们已经知道 offsetHeight 是自身元素的宽度，而 scrollHeight 是内部元素的绝对宽度，包含内部元素的隐藏的部分。上述中 p 的 scrollHeight 为 300，而 p 的 offsetHeight 为 100。
  scrollWidth 也是类似道理。IE 和 FireFox 全面支持，而 Netscape 8 和 Opera 7.6 不支持 scrollTop、scrollLeft（document.body.scrollTop、document.body.scrollLeft 除外）。
（1）、clientHeight, clientWidth: 
   这两个属性大体上显示了元素内容的象素高度和宽度.理论上说这些测量不考虑任何通过样式表加入元素中的页边距,边框等.
（2）、clientLeft,clientTop: 
   这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0.
（3）、scrollLeft,scrollTop: 
   如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.对于不可以滚动的元素,这些值总是0.
（4）、scrollHeight,scrollWidth: 
   不管有多少对象在页面上可见,他们得到的是整体.
（5）、style.left: 
   定位元素与包含它的矩形左边界的偏移量
（6）、style.pixelLeft: 
   返回定位元素左边界偏移量的整数像素值.因为属性的非像素值返回的是包含单位的字符串,例如,30px. 利用这个属性可以单独处理以像素为单位的数值.
（7）、style:posLetf: 
   返回定位元素左边界偏移量的数量值,不管相应的样式表元素指定什么单位.因为属性的非位置值返回的是包含单位的字符串,例如,1.2em 

  

5、总结

  scrollHeight: 获取对象的滚动高度。  

  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

  scrollWidth:获取对象的滚动宽度

 

  offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
  offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

  offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 

 

  event.clientX 相对文档的水平座标

  event.clientY 相对文档的垂直座标

  event.offsetX 相对容器的水平坐标

  event.offsetY 相对容器的垂直坐标

  

  document.documentElement.scrollTop 垂直方向滚动的值

  event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量  

 以上主要指IE之中，FireFox差异如下：
 IE6.0、FF1.06+：
   clientWidth = width + padding
   clientHeight = height + padding
   offsetWidth = width + padding + border
   offsetHeight = height + padding + border
 IE5.0/5.5：
   clientWidth = width - border
   clientHeight = height - border
   offsetWidth = width
   offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

 

7、拖动实例

drag.js程序：

//封装通过class获取元素的方法，getELementsByClassName()的方法在IE中只有IE9+才支持。
//clsName是必须的，parent是可选的
function getByClass(clsName,parent){
  var oParent=parent?document.getElementById(parent):document,
      eles=[],
      elements=oParent.getElementsByTagName('*');//获取整个页面中的所有元素
 
  for(var i=0,l=elements.length;i<l;i++){
    if(elements[i].className==clsName){//判断元素的class名是否相等
      eles.push(elements[i]);
    }
  }
  return eles;//返回一个元素数组
}
window.onload=drag;
function drag(){
   var oTitle=getByClass('login_logo_webqq','loginPanel')[0];//取元素数组的第一个
   // 拖曳
   oTitle.onmousedown=fnDown;
   // 关闭
   var oClose=document.getElementById('ui_boxyClose');
   oClose.onclick=function(){
   	  document.getElementById('loginPanel').style.display='none';
   }
   // 切换状态
   var loginState=document.getElementById('loginState'),
       stateList=document.getElementById('loginStatePanel'),
       lis=stateList.getElementsByTagName('li'),
       stateTxt=document.getElementById('login2qq_state_txt'),
       loginStateShow=document.getElementById('loginStateShow');
 
   loginState.onclick=function(e){
   	 e = e || window.event;
   	 //阻止事件冒泡，防止document.onclick发生
     if(e.stopPropagation){
          e.stopPropagation();
     }else{
          e.cancelBubble=true;
     }
   	 stateList.style.display='block';
   }
 
   // 鼠标滑过、离开和点击状态列表时
   for(var i=0,l=lis.length;i<l;i++){
      lis[i].onmouseover=function(){
      	this.style.background='#567';
      }
      lis[i].onmouseout=function(){
      	this.style.background='#FFF';
      }
      lis[i].onclick=function(e){
      	e = e || window.event;
      	//阻止冒泡，防止loginState.onclick发生
      	if(e.stopPropagation){
          e.stopPropagation();
      	}else{
          e.cancelBubble=true;
      	}
      	var id=this.id;
      	stateList.style.display='none';
        stateTxt.innerHTML=getByClass('stateSelect_text',id)[0].innerHTML;
        loginStateShow.className='';
        loginStateShow.className='login-state-show '+id;
      }
   }
   //隐藏列表ul
   document.onclick=function(){
   	  stateList.style.display='none';
   }
}
//鼠标跟随，需要获取光标位置
//鼠标事件都在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的clientX和clientY属性中
function fnDown(event){
  event = event || window.event;
  var oDrag=document.getElementById('loginPanel'),
  // 光标按下时光标和面板之间的距离
  disX=event.clientX-oDrag.offsetLeft,
  disY=event.clientY-oDrag.offsetTop;
  // 移动
  document.onmousemove=function(event){
  	event = event || window.event;
  	fnMove(event,disX,disY);
  }
  // 释放鼠标
  document.onmouseup=function(){
  	document.onmousemove=null;
  	document.onmouseup=null;
  }
}
 
function fnMove(e,posX,posY){
  var oDrag=document.getElementById('loginPanel'),
      l=e.clientX-posX,
      t=e.clientY-posY,
      //防止脱出窗外
      winW=document.documentElement.clientWidth || document.body.clientWidth,//窗口宽
      winH=document.documentElement.clientHeight || document.body.clientHeight,//窗口高
      maxW=winW-oDrag.offsetWidth-10,//活动最大宽度；其中减去10是因为关闭按钮的样式有个right:-10px;
      maxH=winH-oDrag.offsetHeight;//活动最大高度
  if(l<0){
    l=0;//防止左脱出
  }else if(l>maxW){
    l=maxW;//防止右脱出
  }
  if(t<0){
    t=10;//防止上脱出；t等于10是因为关闭按钮的样式有个top:-10px;
  }else if(t>maxH){
    t=maxH;//防止下脱出
  }
  oDrag.style.left=l+'px';
  oDrag.style.top=t+'px';
}