欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

DOM盒子模型常用属性client,offset和scroll

程序员文章站 2023-12-24 19:08:51
JS盒子模型属性 在JS中通过相关的属性可以获取(设置)元素的样式信息,这些属性就是盒子模型属性(基本上都是有关于样式的) |: |: |: | | |client |top/left/width/height | |offset |top/left/width/height|parent | |s ......

js盒子模型属性

  • 在js中通过相关的属性可以获取(设置)元素的样式信息,这些属性就是盒子模型属性(基本上都是有关于样式的)
    |名称|内容|
    |:---- |:---|:----- |----- |
    |client |top/left/width/height |
    |offset |top/left/width/height|parent |
    |scroll |top/left/width/height |
名称 说明
client 确认按钮回调
  ![]
  (https://img2018.cnblogs.com/blog/1402448/201909/1402448-20190920170309578-2046550625.png)
    <div id="outer">
    <div id="inner">
        <div id="center"></div>
    </div>
    </div>

clienttop/left/width/height

  • 1.clientwidth & clientheight:获取当前元素可视区域的宽高(内容的宽高+左右/上下padding, 和内容是否有溢出无关(和是否设置了overflow:hidden也无关),就是我们自己设定的内容的宽高+padding

获取当前页面一屏幕(可视区域)的宽度和高度

document.documentelement.clientwidth || document.body.clientwidth
document.documentelement.clientheight || document.body.clientheight
  • 2.clienttop & clientleft:获取(上/左)边框的宽度

  • 3.offsetwidth & offsetheight:在client的基础上加上border(和内容是否溢出也没有关系)

  • 4.offsettop / offsetleft:获取当前盒子距离其父级参照物的偏移量(上偏移/左偏移) 当前盒子的外边框开始~父级参照物的内边框

  • 5.offsetparent:当前盒子的父级参照物
    “参照物”:同一个平面中,元素的父级参照物和结构没有必然联系,默认他们的父级参照物都是body(当前平面最外层的盒子) body的父级参照物是null
center.offsetparent  //=>body
inner.offsetparent   //=>body
outer.offsetparent   //=>body
  • 6.scrollwidth & scrollheight:真实内容的宽高(不一定是自己设定的值,因为可能会存在内容溢出,有内容溢出的情况下,需要把溢出的内容也算上)+ 左/上padding,而且是一个约等于的值 (没有内容溢出和client一样), 在不同浏览器中,或者是否设置了overflow:hidden都会对最后的结果产生影响,所以这个值仅仅做参考,属于约等于的值

获取当前页面的真实宽高(包含溢出的部分)

document.documentelement.scrollwidth || document.body.scrollwidth
document.documentelement.scrollheight || document.body.scrollheight
  • 7.scrolltop / scrollleft:滚动条卷去的宽度或者高度

    最小卷去值:0
    最大卷去值:真实页面的高度 - 一屏幕的高度 document.documentelement.scrollheight-document.documentelement.clientheight

    在js盒子模型13个属性中,只有scrolltop/scrollleft是“可读写”属性,其余都是“只读”属性

    操作浏览器的盒子模型属性,我们一般都要写两套,用来兼容各种模式下的浏览器

上一篇:

下一篇: