offset / scroll / client Left / Top

1.offsetHeight / Width (只读)浏览器

  offsetHeight:表示该元素在垂直方向占用的空间大小,包含元素的高度+上边框高度+下边框高度spa

  offsetWidth:表示该元素在水平方向占用的空间大小,包含元素的宽度+左边框宽度+右边框宽度code

2.clientHeight / clientWidth (只读)blog

  clientHeight:元素内容区的高度+元素内边距的高度文档

  clientWidth:元素内容区的宽度+元素内边距的宽度class

 

  clientWidth = width + padding
  offsetWidth = width + padding + border = client + bordercli

  注:该元素未设置:box-sizing:border-boxscroll

3.scrollHeight / scrollWidth总结

  无滚动条的状况下,与client类似,但不一样浏览器有不一样的差异top

  在滚动条存在的状况下,等于client + 滚动条所蜷缩的高度或宽度

总结:

  在肯定文档的总高度时,必须取得scrollWidth / clientWidth 和 scrollHeight / clientHeight 中的最大值,才能保证跨浏览器的环境下获得精确的结果

 

 var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);

 var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);

  注意:在混杂模式下的IE,须要用document.body代替document.documentElement

4.scrollTop / scrollLeft

  获取滚动条滚动的距离

5.offsetLeft / offsetTop (只读,而且没有单位)

  offsetLeft :元素的左外边框至包含元素的左内边框之间的像素距离

  offsetTop : 元素的上外边框至包含元素的上内边框之间的像素距离

  只能经过style.left / top来修改

相关文章
相关标签/搜索