js的client系列、offset系列、scroll系列详细分析

最新推荐文章于 2024-03-20 20:47:01 发布

VIP文章前端小峰

最新推荐文章于 2024-03-20 20:47:01 发布

阅读量527

点赞数

分类专栏：前端技术 JS 文章标签： js

本文链接：https://blog.csdn.net/Shaoyouiqng/article/details/107038819

版权

一、 client系列

1、clientWidth和clientHeight

表示可视区域的高度（其中只有padding包含在里面，其他的border、margin、滚动条都不包含）
存在垂直滚动条:
contentWidth + padding - scollbarWidth

不存在滚动条:
contentWidth + padding

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2izrkY4P-1593487597549)(images/screenshot_1593429870288.png)]

2、clientTop和clientLeft

表示边框的宽度，指的是border,有滚动条就包含滚动条

scrollbarWidth = (content width + paddingLeftWidth + paddingRightWidth) - clientWidth

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v9esGRSy-1593487597551)(images/screenshot_1593430348406.png)]
client相关代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
   
      width: 300px;
      height: 200px;
      border: 10px solid rebeccapurple;
      background-color: royalblue;
      padding: 20px;
      margin: 100px;
    }
  </style>
</head>
<body>
  <div>
    fjaskdfl;jasdffaklsdhdklashfklsda
    hfaskdhfksldafhksadjfhskadfjads
    hfsakjfaslfjsdakfhasfjkhsdjfhsakfl
    jahsalfadsfhjladsfhasdkfjhdsafa
  </div>
  <script>
    var  doms= document.getElementsByTagName('div')[

最低0.47元/天解锁文章

前端小峰

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js的client系列、offset系列、scroll系列详细分析

一、 client系列1、clientWidth和clientHeight表示可视区域的高度（其中只有padding包含在里面，其他的border、margin、滚动条都不包含）存在垂直滚动条:contentWidth + padding - scollbarWidth不存在滚动条:contentWidth + padding2、clientTop和clientLeft表示边框的宽度，指的是border,有滚动条就包含滚动条scrollbarWidth = (co
复制链接

扫一扫