DOM学习实用路线（10）——DOM元素的尺寸获取-client和scroll

最新推荐文章于 2023-12-20 13:55:01 发布
最新推荐文章于 2023-12-20 13:55:01 发布
阅读量461 收藏
点赞数
分类专栏： Web前端 原生JavaScript JS——DOM 文章标签： css html5 js javascript dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013946061/article/details/105431898
版权

元素的尺寸获取

  • client
    • clientWidth 可视宽度 - border
    • clientHeight 可视高度 - border
    • clientTop 上边框宽度
    • clientLeft 左边框宽度

　　client宽高包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话） ，其宽高盒模型如下：

在这里插入图片描述
　　clientclientTop 是一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距，盒模型如下：
　在这里插入图片描述
　　clientclientLeft 表示一个元素的左边框的宽度，以像素表示。如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。clientLeft 不包括左外边距和左内边距上，盒模型如下：
在这里插入图片描述　　


clientWidth/clientHeight = width(height) + padding;
clientLeft/clientTop: 左边框宽度/上边框宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            margin: 50px auto;
            position: relative;
            width: 500px;
            height: 500px;
            border: 1px solid #000;
        }
        #div {
            position: absolute;
            left: 100px;
            top: 100px;
            margin: 50px 0 0 -100px;
            width: 100px;
            height: 100px;
            padding: 30px;
            border: 5px solid rgb(246, 250, 1);
            background: red;
        }
    </style>
</head>
<body>
 <div id="box">
     <div id="div"></div>
 </div>   
<script>

{
    let div = document.querySelector("#div");
    // clientWidth/clientHeight =  width(height) + padding;
    console.log(div.clientWidth,div.clientHeight);
    // clientLeft/clientTop: 左边框宽度/上边框宽度
    console.log(div.clientLeft,div.clientTop);
}
</script>    
</body>
</html>

在这里插入图片描述
注意:用ps测距时，截图按100%比例截取，否则可能会有误差！
在这里插入图片描述

  • scroll
    • scrollWidth 内容宽度
    • scrollHeight 内容高度
    • scrollLeft 左右滚动距离
    • scrollTop 上下滚动距离

scrollHeight：内容高度，如果内容高度比元素高度要高，scrollHeight 就是内容，否则就是元素高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            margin: 50px auto;
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            overflow: auto;
        }
        #div {
            width: 100px;
            padding: 30px;
            background: red;
        }
    </style>
</head>
<body>
 <div id="box">
     <div id="div">
            元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离
     </div>
 </div>   
<script>
{
    let box = document.querySelector("#box");
    console.log(box.scrollHeight);// 内容高度
}

</script>    
</body>
</html>

在这里插入图片描述
实际高度是：内容高度加padding
在这里插入图片描述
小编还发现，用火狐打开的盒模型与谷歌会不同：
在这里插入图片描述
如果内容较少，则scrollHeight 就是元素高度。
在这里插入图片描述


哪怕不显示内容，即无内容，此时也为元素高度。

#div {
    width: 100px;
    padding: 30px;
    background: red;
    display:none;
}

在这里插入图片描述


scrollWidth 元素的内容宽度，如果内容宽度小于box宽度，就是box宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            margin: 50px auto;
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            overflow: auto;
        }
        #div {
            width: 100px;
            padding: 30px;
            background: red;
        }
    </style>
</head>
<body>
 <div id="box">
     <div id="div">
            元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离
     </div>
 </div>   
<script>
{
    let box = document.querySelector("#box");
    console.log(box.scrollHeight);
    console.log(box.scrollWidth);
}

</script>    
</body>
</html>

在这里插入图片描述


去除滚动条，显示正常300，因此计算时会把滚动条算在之外。

#box {
    margin: 50px auto;
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    overflow: hidden;
}

在这里插入图片描述


scrollLeft 左右滚动距离
scrollTop 上下滚动距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            margin: 50px auto;
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            overflow: auto;
        }
        #div {
            width: 400px;
            /* width: 100px; */
            padding: 30px;
            background: red;
        }
    </style>
</head>
<body>
 <div id="box">
     <div id="div">
            元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离元素左侧距离可视区左侧距离
     </div>
 </div>   
<script>
{
    let box = document.querySelector("#box");

    setInterval(()=>{
        console.log("上下位置：" + box.scrollTop);
        console.log("左右位置：" + box.scrollLeft);
    },3000);
}

</script>    
</body>
</html>

在这里插入图片描述


滚轮常用事件：onscroll滚动条发生滚动时的事件

let box = document.querySelector("#box");
    box.onscroll = function(){     // 滚动条发生滚动时的事件
    console.log(box.scrollTop);
};

在这里插入图片描述




（后续待补充）

溜_x_i_a_o_迪
关注
专栏目录
DOM元素尺寸和位置相关的属性(clientWidth、offsetWidth、scrollWidth...)总结
小赛赛爱吃肉
01-09 947
由于DOM元素位置和大小的属性这块和鼠标事件的知识点容易混淆，所以需要单独总结一下，又不想把截图存到本地，所以就有了这篇文章。如果有什么地方写的不对，还请私信或留言给我扶正! 谢谢。
html 获取div坐标,DOM系列：获取元素位置和尺寸
weixin_35385409的博客
06-01 1070
对于每一位Web开发的同学而言，在CSS的世界当中，每一个元素都是一个盒子，都有描述盒子大小和位置的相关属性。比如CSS的盒模型相关的属性和position相关属性。不过今天我们学习和聊的不是CSS的世界，而是来学习和聊JavaScript中怎么获取元素尺寸和位置。在JavaScript中也有很多属性允许我们读取有关元素的width、height和其他几何特性的信息。对于元素的位置获取和控制，在J...
理解clientHeight,scrollHeight,offsetHeight等Dom中的Element对象属性
fredricen的专栏
03-22 807
目录代码HTMLCSSJavaScript理解 代码 HTML <div class="container"> <div id="aa" contenteditable style="width:1400px;height:1000px;border-left: 10px solid #ccc;border-top:10...
[dom] Element.clientWidth
weixin_36210698的博客
07-22 633
Element.clientWidth属性对于inline和 (elements with no CSS 不太懂)元素返回 0， 如果不是这样的元素则以象素为单位返回元素的里部距离，它包括内边距但是不包括边框，边距，和垂直的滚动条(如果出现的话)。 语法 var intElemClientWidth = element.clientWidth; intElementClientWidth是ele...
Dom：关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较
weixin_33852020的博客
01-07 259
IE6.0、FF1.06+： clientWidth = width +padding clientHeight = height + padding offsetWidth = width + padding + border offsetHeight = height + padding + border IE5.0/5.5： clientWidth = width - borde...
详解DOM对象中clientWidth、offsetWidth等属性
热门推荐
葉無聞
04-17 1万+
我们有时需要获得鼠标在某盒子中的位置，或者是随意移动某盒子的位置，在这些场景中我们可能经常需要用到clientWidth、offsetWidth、offsetTop啊等等。但是对于初学者来说（包括我），看到这些就头疼，因为感觉意思都相近，但作用却不同，所以今天天我就来捋一捋，搞清楚，后面好干活。好吧，废话不多说，开始吧。 先上一下示例代码，下面要用到。 HTML: ...
js中offset,client , scroll 三大元素知识点总结
10-16
在JavaScript开发中，操作DOM元素以获取或设置其尺寸、位置和滚动信息是常见的需求。本篇将详细介绍与元素尺寸位置和滚动相关的三个重要的属性家族：offset系列、client系列和scroll系列。这些属性为我们提供了元素...
第十三课 DOM元素尺寸1
08-03
总结起来，了解并熟练掌握DOM元素的`client`、`offset`和`scroll`系列属性，可以帮助前端开发者更精确地控制网页元素的布局和交互，从而提升用户体验。在实际项目中，这些知识的应用广泛且至关重要，无论是简单的...
DOM元素位置获取封装：解决浏览器兼容问题
"获取DOM元素位置的封装代码" 在前端开发中，处理DOM元素的位置是一项常见的任务，但不同浏览器对这些操作的支持并不统一，导致开发者需要编写大量的兼容性代码。这个资源提供了一个封装好的JavaScript函数集，旨在...
页面DOM元素的scroll与offset相关属性
左岸
10-01 1808
1.offsetParent元素的offsetParent属性是距离该元素最近的一个具有定位的父辈元素，如果没有符合条件的父辈元素，那么body就是它的offsetParent。2.offsetWidth与offsetHeightoffsetWidth=width+横向padding值+横向border值+[横向滚动条width] 实际上，就是元素渲染到页面后的实际宽度尺寸，是否包含横向滚动条的宽
DOM操作之获取元素占位
qq_44531034的博客
03-29 412
宽度，高度，margin，padding，border 1.可以通过标签样式来获取 获取到的结果是属性值有px单位 window.getComputedStyle(oDiv).height 2.其他方式 offsetHeight offsetWidth 宽/高+padding+border clientHeight clientWidth 高/宽+padding clientLeft cl...
DOM获取元素位置的三大系列offset/scroll/client
weixin_33971205的博客
01-23 279
2019独角兽企业重金招聘Python工程师标准>>> ...
深度解析DOM尺寸与位置：clientWidth、offsetWidth、scrollWidth、getBoundingClientRect() 一网打尽
最新发布
编码行者的博客
12-20 1172
获取元素内容区域的宽度，不包括边框和滚动条。：获取元素相对于其父元素的偏移宽度，包括边框、内边距和滚动条。：获取元素内容的总宽度，包括溢出的部分。：获取元素相对于视口的位置和大小信息。在实际应用中，根据具体的需求选择合适的属性或方法来获取元素的尺寸和位置信息，可以更灵活地处理 DOM 操作。
Javascript——轮播图、document获取元素、scroll
mintsolace的博客
07-17 184
console.log(document.body);//获取的是元素——标签 //获取title console.log(document.title);//标签中的值 document.title="mayday"; //获取html console.log(document.documentElement); offset系列:获取元素的相关...
JS获取DOM的高度包括Padding margin border
xtaydwxf1988的专栏
04-21 1万+
var dom=document.getElementById('center'); var marginTop=getStyle(dom,'marginTop'); alert(parseInt(marginTop)); function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[a
offset和client获取dom元素位置信息
cyj5201314的博客
04-18 554
offset获取元素宽高和偏移量 offsetTop获取元素上部相对于带定位的父元素偏移的距离，若父元素均不带定位则返回相对于body的距离 offsetLeft作用同offsetTop offsetParent返回元素带有定位的父元素，父元素均不带定位则返回body offsetWidth返回元素元素宽度，包括padding，边框，内容区域的宽度 offsetHeight作用同offsetWidth offset与style的区别 最明显的区别在于offset获取到的属性值是只读属性，不能用于修改元
js/jQuery获取 margin 和 padding
╮(╯_╰)╭ Don't expect me to reply to you in time
09-25 5317
jQuery 方式  var px = $("#id").css("marginLeft");// px = '400px' var num = parseInt(px);    JavaScript 方式 var dom = document.getElementById("id"); var marginLeft = getStyle...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值