常用得位置属性clientWidth，clientHight,offsetLeft,offsetTop和滚动scrollTop,scrollLeftt

最新推荐文章于 2022-08-15 15:52:42 发布
最新推荐文章于 2022-08-15 15:52:42 发布
阅读量325 收藏
点赞数
文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42270374/article/details/106992199
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

 

    <style>

        *{

            margin:0px;

            padding:0px;

        }

        div {

            width:200px;

            height:200px;

            border:5px solid red;

            background:yellow;

            padding:10px;

            margin:20px;

            overflow: auto;

        }

 

    </style>

</head>

<body>

 

<div  id="dv">

<p>##########</p>

<p>##########</p>

<p>##########</p>

<p>##########</p>

<p>##########</p>

<p>##########</p>

<p>##########</p>

<p>##########</p>

<p>##########</p>

<p>##########</p>

<p>##########</p>

<p>##########</p>

<p>##########</p>

<p>##########</p>

<p>##########</p>

<p>##########</p>

<p>##########</p>

</div>

<script>

    var dv = document.getElementById("dv");

    //     clientWidth

    //     clientHeight

    //     可视部分的宽度和高度， content + padding

    //     如果出现滚动条， 会覆盖元素宽高， 减去滚动条的宽高

 

    // console.log(dv.clientWidth);

    // console.log(dv.clientHeight);

 

        // 200          10        5

        // content + padding  + border

    // console.log(dv.offsetWidth);

    // console.log(dv.offsetHeight)  /*

 

        这个属性指的就是读取元素border的宽度和高度

     */

    console.log(dv.clientLeft);

    console.log(dv.clientTop);

</script>

 

</body>

</html

 

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #father {

            width: 500px;

            height: 500px;

            background-color: red;

            position: relative;

            margin: 0 auto;

        }

        #son {

            width: 100px;

            height: 100px;

            background-color: lightpink;

            position: absolute;

            margin-left: 100px;

            left: 100px;

            margin-top: 100px;

            top: 50px;      

        }

    </style>

    

</head>

<body>

    <div id="father">

        <div id="son"></div>

    </div>

    <script>

        let son = document.getElementById('son');

     

        // 获得定位元素与父元素顶部的距离,以及左边的距离

        // 定位元素在父元素中的水平与垂直位置

      

        console.log(son.offsetLeft);

        console.log(son.offsetTop);

    </script>

</body>

</html>

 

<!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>

        #box {

            width: 200px;

            height: 200px;

            border: 2px solid red;

            overflow: auto;

            /* 自适应内容,添加滚动条 */

        }

 

        img {

            vertical-align: middle;

        }

    </style>

</head>

<body>

    <button id="btn">点我</button>

    <div id="box">

        <img src="./1.jpg" alt="">

    </div>

    <script>

        // 如何监测目标元素的滚动

        let box = document.getElementById('box');

 

        // 滚动事件

        box.onscroll = function () {

            // 请实时打印水平与垂直方向的滚动距离

            // console.log('垂直滚动的距离是:'+box.scrollTop);

            // console.log('水平滚动的距离是:'+box.scrollLeft);

            // console.log('------------------------');

 

             if (box.scrollTop >= 100) {

                // 你不是神,怎么刚好调用的时候就是100

                alert('我吓死你');

            }

        }

    </script>

</body>

 

^smile
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
clientHeight
04-08
四种浏览器对_clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth_和_scrollWidth_的解
终于清晰啦！offsetHeight、scrollHeight、clientHeight和offsetTop、scrollTop、clientTop
特大号虾米的博客
10-17 2655
一、offsetHeight、scrollHeight、clientHeight l你好ll白布a隐隐约约隐隐约约隐隐约约 var tDiv = document.getElementById('div2'); console.log("clientHeight:
javascript-client：:high_voltage:适用于javascript应用程序的Apisearch客户端！
02-05
Apisearch-Javascript客户端 该库是Apisearch项目的一部分。 Apisearch是一个完全基于开源第三方技术的开源搜索引擎。 该项目为她的用户提供了一套渐进式的语言集成库，以及一些第三方项目集成包，插件或javascript小部件。 为您准备的第一步！ 要么 使用这些链接进行游览。 -或 ...并记得在Github上给我们一颗星！ 我们拥有的星星越多，到达的距离就越远。
解析offsetHeight,clientHeight,scrollHeight之间的区别
12-10
在网上搜了一下，结论非常笼统，讲IE从不讲版本，因此自己做了测试并上传结论。以下结论皆是在标准模式下测试通过的，没有测试quirk模式。 clientHeight 大部分浏览器对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，即然是指可看到内容的区域，滚动条不算在内。但要注意padding是算在内。其计算方式为clientHeight = topPadding + bottomPadding+ height – scrollbar.height。 offsetHeight在IE6，IE7，IE8以及最新的的FF, Chr
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
10-15
在JavaScript中，DOM元素的尺寸和位置是网页布局的关键因素，`offsetWidth`、`clientWidth`、`innerWidth`以及一系列相关属性方法用于获取和处理这些信息。这些属性可以帮助开发者精确地控制页面元素的显示效果，...
用JavaScript获取DOM元素位置和尺寸大小的方法
12-01
在JavaScript中，获取DOM元素的位置和尺寸大小是Web开发中常见的需求，特别是在创建动态效果或者进行复杂的布局计算时。为了实现这些功能，开发者需要熟悉一些关键的DOM属性，包括`offsetWidth`, `clientWidth`, `...
JavaScript DOM元素尺寸和位置
10-24
- **offsetLeft和offsetTop**：这两个属性返回元素相对于其最近的定位祖先元素的左边界和顶边界的偏移量，包括边框，但不包括外边距。 4. **其他相关属性** - **scrollLeft和scrollTop**：用于获取或设置元素的...
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
11-27
总的来说，理解和熟练运用这些JavaScript方法，可以帮助开发者更好地控制网页元素的位置和大小，实现动态布局和交互效果，从而提升用户体验。在实际开发中，应始终考虑跨浏览器兼容性，确保代码在各种环境下都能正常...
offsetWidth,offsetHight包括边框，clientWidth,clientHight不包括边框（但包括padding）/page-- 模态框拖拽案例----京东淘宝放大镜的案例
南下有你
02-20 541
1.获取鼠标在盒子内的标签- index.html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ ...
offsetWidth、clientWidth、scrollWidth、offsetLeft、scrollLeft详解
qq_29022637的博客
11-09 2039
dom对象 offsetWidth = 对象本身的宽度（width+padding+borber包括滚动条） clientWidth = 对象可视宽度（width+padding） scrollWidth = 实际内容的宽度 offsetLeft = 相对于父级定位元素，在X方向的偏移量（如果本身没设置margin，则与style.left相同） scrollWidth = x方向的滚动距离
JavaScript client、offset、scroll的 width与height 和 left与top，以及浏览器窗口尺寸的获取
软不隆冬的er更
08-17 200
文章目录长度和尺寸clientclientWidth和clientHeightclientLeft和clientTopoffsetoffsetParentoffsetWidth和offsetHeightoffsetLeft和offsetTopscrollscrollWidth和scrollTopscrollLeft和scrollTop浏览器窗口尺寸BOM级别获取DOM级别的获取 长度和尺寸 client clientWidth和clientHeight 元素的 内容 + 左右padding 区域的尺寸 di
判断元素进入可视区的方法
MILK_LL的博客
08-15 1242
判断元素进入可视区的方法
彻底分清clientHeight，scrollHeight，offsetHeight，clientTop，scrollTop，offsetTop的区别
dongdaxiaopenyou的博客
09-06 1万+
clientHeight，scrollHeight，offsetHeight clientHeight: 可理解为内部可视区高度，样式的height+上下padding scrollHeight: 内容的实际高度+上下padding（如果没有限制div的height，即height是自适应的，一般是scrollHeight==clientHeight） offsetHei...
clientWidth clientHeight scrollWidth scrollHeight offsetWidth offsetHieght的区别
chaoguo1234的专栏
03-12 174
clientWidth:元素内容区的宽度加上左右padding的值，如果有滚动条，不包括滚动条的宽度 clientHieght: 元素内容区的高度加上上下padding的值，如果有滚动条，不包括滚动条的高度 clientLeft:元素左边框的宽度，如果没有边框，就是0 clientTop:元素上边框的宽度，如果没有边框，就是0   scrollWidth:元素的滚动宽度，不包括...
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
热门推荐
qq_35430000的博客
05-11 16万+
转载自：https://www.imooc.com/article/17571网页可见区域高：document.body.clientHeight网页正文全文高：document.body.scrollHeight网页可见区域高（包括边线的高）：document.body.offsetHeight网页被卷去的高：document.body.scrollTop屏幕分辨率高：window.screen...
js -- 获取浏览器高度以及clientHeight、scrollHeight、offsetHeight区别
bobobocai的博客
11-22 8920
//浏览器卷去部分高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //浏览器窗口高度，已做兼容 var winHeight; if (window.innerHeight) { winHeight = window.innerHeig
关于clientHeight，offsetHeight等小笔记
免惘
05-09 4575
遇到一个有个问题：关于clientHeight，offsetHeight，scrollHeight，以及height，contentHeight（width也一样）的区别。 这里有参考http://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-res
offsetWidth、clientWidth、scrollTop的区别？
最新发布
06-09
offsetWidth是一个元素的完整宽度，包括border、padding和元素的width。 clientWidth是指元素的可视宽度，即不包括元素的border和滚动条的宽度，但包括padding。 scrollTop是指元素的滚动条在垂直方向上滚动的距离。当元素内容超出元素可视区域时，滚动条就会出现，可以通过scrollTop属性获取或设置元素滚动的位置。 总结： - offsetWidth包括整个元素的宽度，包括padding、border和width。 - clientWidth只包括元素的宽度和padding，不包括border和滚动条。 - scrollTop是指元素垂直方向上的滚动距离。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值