js操作盒子模型的13个API

最新推荐文章于 2023-09-18 19:09:03 发布

予倾

最新推荐文章于 2023-09-18 19:09:03 发布

阅读量245

点赞数

分类专栏： js 文章标签： js javascript

本文链接：https://blog.csdn.net/QZ9420/article/details/109740321

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

盒子模型：

可以通过js来操作css中的盒子模型。

js操作盒子模型：

1）操作盒子模型的位置
2）操作盒子模型的大小

不管是操作盒子模型的位置，还是盒子模型的大小，一共有13个api:  说明：不需要记  你也记不住
三类：
    client系列
    offset系列
    scroll系列

client系列：

clientWidth（可视区域）: 获取盒子的内容width+左右的padding
clientHeight（可视区域）: 获取盒子的内容height+上下的padding
clientTop:获取盒子的上边框的粗细
clientLeft:获取盒子的左边框的粗细

要获取当前页面内容的宽度（可视区域）：
// 获取一屏的宽度
console.log(document.body.clientWidth)
console.log(document.documentElement.clientWidth)

要获取当前页面内容的高度（可视区域）：
// 获取可视区域的高度
console.log(document.body.clientHeight); // 获取内容（多屏）的高度
console.log(document.documentElement.clientHeight); // 获取一屏的高度

client系列的注意点：

1）不能获取，不能设置，它们是只读地
2）得到的是一个数值，没有单位
3）得到的是一个整数，不是小数，及时测试量出来是小数，也会转化成整数
4）不管你的内容是否溢出，得到的是可视区的大小

offset系列

offsetWidth: box.offsetWidth  在clientWidth的基础上加了border
offsetHeight: box.offsetHeight  在clientHeight的基础上加了border
offsetTop: 获取一个绝对定位元素相对于参考点的上面的距离
offsetLeft: 获取一个绝对定位元素相对于参考点的左面的距离
offsetParent(***): 获取一个定位元素的参考点

scroll系列:

    scroll本意是滚动的意思   基本上都是在有内容溢出的情况下才会使用scroll系列
    scrollWidth:  用的不多
    在没有内容溢出(水平方向上的溢出)的情况下：scrollWidth == clientWidth
    在内容溢出的情况下：scrollWidth的值约等于真实内容的宽度，不同浏览器中得到的值可能不一样
    overflow属性会影响scrollWidth。
    只能获取值，不能设置值
    scrollHeight: **
    在没有内容溢出的情况下：scrollHeight = clientHeight
    在内容溢出的情况下：scrollHeight的值约等于真实内容的高度，不同浏览器中得到的值可能不一样
    overflow属性会影响scrollHeight。
    只能获取值，不能设置值

问：我要获取当前页面真实内容的高度。
答：
1）document.body.scrollHeight
2）document.documentElement.scrollHeight

// 获取当前一屏的高度

console.log(document.documentElement.clientHeight)
// 获取当前网页内容高度
console.log(document.documentElement.scrollHeight)
console.log(document.body.scrollHeight)
scrollTop:
获取垂直滚动条滚动的距离（获取垂直滚动条卷去的高度）
特殊：不只可以获取，也可以设置（可读可写）重要

    问：我要获取当前页面卷上去高度。
       答：1）document.body.scrollTop   2）document.documentElement.scrollTop

    问：一张网页卷上去最大高度是多少？
       答：scrollHeight - clientHeight
scrollLeft: 没什么用
    特殊：不只可以获取，也可以设置（可读可写）
    获取水平滚动条滚动的距离（获取水平滚动条卷去的距离）  基本上用不到
    没有什么卵用

总结：

client系列: width, height, top, left
    clientWidth/clientHeight: 获取盒子或页面可视区域的宽高
    clientTop:获取盒子的上边框的大小
    clientLeft:获取盒子的左边框的大小
offset系列: width, height, top, left, parent
    offsetWidth/offsetHeight: 获取盒子或页面可视区域的宽高+border
    offsetTop:获取一个定位元素相对于参考点的上面的距离
    offsetLeft:获取一个定位元素相对于参考点的左面的距离
    offsetParent:获取一个定位元素的参考点
scroll系列: width, height, top, left
    scrollWidth/scrollHeight:获取盒子或页面真实内容的宽度
    scrollTop:获取页面或盒子向上卷去的高度
    scrollLeft:获取页面或盒子向左卷去的宽度  基本上用不到