JS的盒子模型

JS的盒子模型

分为三大系列: offset client scroll

• offset

  • offsetHeight和offsetWidth

  box.offsetHeight指的是box的整个高的长度,包括content+border
box.offsetWidth指的是box的整个宽的长度,包括content+border

  • offsetTop和offsetLeft

  box.offsetTop指的是box的相对box的具有定位属性的父级元素的上偏移长度
box.offsetLeft指的是box的相对box的具有定位属性的父级元素的左偏移长度

  注意: offsetLeft和style.left的区别 :

  • 最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置;
  • offsetLeft 返回的是数字，并且带有单位：px。 而 style.left 返回的是字符串;
  • offsetLeft 只读，而 style.left 可读写;
  • 如果没有给元素指定过 left 样式，则style.left 返回的是""空字符串。

  • offsetParent

  box.offsetParent指的是box的

• client

  • clientHeight和clientWidth

  box.clientHeight指的是当前box的可视窗口的高度,不包括border
  box.clientWidth指的是当前box的可视窗口的宽度,不包括border

  • clientTop和clientLeft

  box.clientTop指的是box的上边框的宽度
  box.clientLeft指的是box的左边框的宽度

• scroll

  • scrollHeight和scrollWidth

  box.scrollHeight指的是box盒子的真实高度,包括溢出部分; 再没有内容溢出(没有滚动条)的情况下,box.scrollHeight 等于box.clientHeight, 有内容溢出(没有滚动条)的情况下,box.scrollHeight 等于 box.clientHeight加上溢出部分
box.scrollWidth指的是盒子的真实宽度,包括溢出部分; 再没有内容溢出(没有滚动条)的情况下,box.scrollWidth 等于box.clientWidth, 有内容溢出(没有滚动条)的情况下,box.scrollWidth 等于 box.clientWidth加上溢出部分

  • scrollTop和scrollLeft

  box.scrollTop指的是内容被卷进滚动条的那部分高度
  box.scrollLeft指的是内容被卷进滚动条的那部分宽度

注意: JS的这13个属性只有scrollTop和scrollLeft可写,其他属性都只可读