<JavaScript>尺寸类样式的获取

尺寸类样式的获取

offsetHeight

HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。(content+padding+border)

通常，元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。

对于文档的body对象，它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。

如果元素被隐藏（例如 元素或者元素的祖先之一的元素的style.display被设置为none），则返回0

• 语法

  var intElemOffsetHeight = document.getElementById(id_attribute_value).offsetHeight;

• 实例

  var hei = obox.offsetHeight;//返回一个整数数值

  

  上面的图片中显示了scollbar和窗口高度的offsetHeight.但是不能滚动的元素可能会有一个很大的高度值，大于可以看见的内容。这些元素原则上是被包含在滚动元素之中的。所以，这些不能滚动的元素可能会因为scrollTop的值会被完全隐藏或者部分隐藏；

offsetWidth

HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的（译者注：各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。

content+padding+border

• 语法

  var offsetWidth =element.offsetWidth;

  这个属性将会 round(四舍五入)为一个整数。如果你想要一个fractional(小数)值,请使用element.getBoundingClientRect()

• 分类

  1. 假如元素无padding无滚动无border

     offsetWidth = clientWidth = style.width

  2. 假如元素有padding无滚动有border

     offsetWidth = style.width + style.padding*2 + border宽度*2

  3. 假如元素有padding有滚动，有border，且滚动是显示的

     offsetWidth = style.width + style.padding*2 + (border-width)*2
     offsetWidth = clientWidth + 滚轴宽度 + border宽度*2

     offsetHeight同理

• 实例

  var wid = obox.offsetWidth;//返回一个整数数值

  

clientWidth

clientWeight是一个只读属性。尺寸范围为：padding+content

内联元素以及没有 CSS 样式的元素的 **clientWidth** 属性值为 0。**Element.clientWidth** 属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。

• 语法

  var intElemClientWidth = element.clientWidth;
  //intElemClientWidth 是一个整数，表示元素的 clientWidth。

• 分类

  1. 假如元素无padding无滚动

     clientWidth = style.width

  2. 假如元素有padding无滚动

     clientWidth = style.width + style.padding*2

  3. 假如元素有padding有滚动，且滚动是显示的

     clientWidth = style.width + style.padding*2 - 滚动轴宽度

     clientHeight同理

• 实例

  var cw = obox.clientWidth;//返回一个整数数值

  

clientHeight

clientHeight是一个只读属性。尺寸范围为：padding+content

• 语法

  var intElemClientHeight = element.clientHeight;
  //intElemClientHeight 是一个整数，表示元素的 clientHeight。

• 实例

  var ch = obox.clientHeight;//返回一个整数数值

  

offsetTop

HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。

相对于页面或包含块偏移的位置

• 语法

  topPos = element.offsetTop;

• 实例

  var d = document.getElementById("div1");
  var topPos = d.offsetTop;
  
  if (topPos > 10) {
    // div1 距离它的 offsetParent 元素的顶部的距离大于 10 px
  }

offsetLeft

HTMLElement.offsetLeft 为只读属性，它返回当前元素相对于其 offsetParent 元素的左边内边距的距离。

相对于页面或包含块偏移的位置

• 语法

  leftPos = element.offsetLeft;

• 实例

  var d = document.getElementById("div1");
  var topLeft = d.offsetLeft;
  
  if (topLeft > 10) {
    // div1 距离它的 offsetParent 元素的顶部的距离大于 10 px
  }

以上属性只能获取不能设置

scrollTop

Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。

一个元素的 scrollTop 值是这个元素的顶部到视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

• 语法

  // 获得滚动的像素数
  var  intElemScrollTop = someElement.scrollTop;
  
  // 设置滚动的距离
  element.scrollTop = intValue;

• 实例

  document.onclick = function(){
      // console.log(obox.scrollTop);
      obox.scrollTop = 666;
  }

  ​

scrolLeft

Element.scrollLeft 属性可以读取或设置元素滚动条到元素左边的距离。

注意如果这个元素的内容排列方向（direction） 是rtl (right-to-left) ，那么滚动条会位于最右侧（内容开始处），并且scrollLeft值为0。此时，当你从右到左拖动滚动条时，scrollLeft会从0变为负数（这个特性在chrome浏览器中不存在）。

• 语法

  //获取滚动条到元素左边的距离
  var sLeft = element.scrollLeft;
  
  //设置滚动条滚动了多少像素
  element.scrollLeft = 10;

  scrollLeft 可以是任意整数，然而：

  • 如果元素不能滚动（比如：元素没有溢出），那么scrollLeft 的值是0。
  • 如果给scrollLeft 设置的值小于0，那么scrollLeft 的值将变为0。
  • 如果给scrollLeft 设置的值大于元素内容最大宽度，那么scrollLeft 的值将被设为元素最大宽度。

• 实例

  document.onclick = function(){
      // console.log(obox.scrollLeft);
      obox.scrollLeft = 666;
  }