width height

width height

  1.clientHeight,   clientWidth:  
  clientWidth = width + padding
  clientHeight = height + padding 
  2.clientLeft,clientTop:  
  这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0. 

  3.scrollLeft,scrollTop:  
  如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.  
  对于不可以滚动的元素,这些值总是0.  
  4.scrollHeight,scrollWidth:  
  不管有多少对象在页面上可见,他们得到的是整体.

  5.style.left:  px
  定位元素与包含它的矩形左边界的偏移量  
  6.style.pixelLeft:  不带px
  返回定位元素左边界偏移量的整数像素值.因为属性的非像素值返回的是包含单位的字符串,例如,30px.   利用这个属性可以单独处理以像素为单位的数值.

如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区别在于:

1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,offsetTop 返回的是数字,如果需要对取得的值进行计算,还用offsetLeft比较方便。

2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left。

3. style.left的值需要事先定义(HTML 元素指定过 top 样式),否则取到的值为空。而且必须要定义在html里,我做过试验,如果定义在css里,style.left的值仍然 为空,这就是我刚开始碰到的问题,总是取不到style.left的值。offsetLeft则仍然能够取到,无需事先定义div的位置

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


MSDN解释offsetParent在大多时候返回的是Body,其实是返回第一个非流布局的父级元素,也就是postion的值是 absolute,relative,fixed,(inherit 继承父元素也是前三者)其中之一,当然如果父级元素都是流布局最后返回的肯定是Body,由此可见offsetParent本身在获取的时候要通过页面不断查找父元素,尤其在代码多层嵌套的时候,需要向上查找未知的层次,直到获取到第一个非流布局元素。

offsetLeft和offsetTop分别返回相对offsetParent的位置,也就是返回相对第一个非流布局父级元素的位置。

上面的代码可以看出这个方法是通过不断循环获得相对非流布局父元素的位置相加来最后计算得到要获取的位置。

IE7对offsetParent解释有个BUG,貌似始终返回父元素。

你可能感兴趣的:(height)