offset client scroll详解

最新推荐文章于 2025-02-19 18:12:20 发布

小赵学习

最新推荐文章于 2025-02-19 18:12:20 发布

阅读量563

点赞数

分类专栏： offset client scroll详解文章标签： javascript

本文链接：https://blog.csdn.net/qq_46079799/article/details/109230126

版权

offset client scroll详解专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍了JavaScript中的location对象、history对象和navigator对象，以及窗口对象的偏移量属性，包括offset系列、client系列和scroll系列，帮助理解如何获取和使用这些属性来操作浏览器地址、历史记录以及元素的定位信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

location对象

location对象是window对象下的一个属性

location可以获取或设置浏览器地址栏的url

history对象

back（）：回到上一级

forward（）下一级

go（）：跳转

navigator 对像

userAgent（）：可以查看当前浏览器的类型

platform（）：可以查看用户的操作系统类型

偏移量

给两个盒子（都有padding和margin，border）

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

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        #box {
            width: 300px;
            height: 300px;
            border: 5px solid #000;
            padding: 10px;
            margin: 100px;
        }
        
        #son {
            width: 100px;
            height: 100px;
            border: 2px solid #ccc;
            padding: 10px;
            margin: 20px;
        }
    </style>

offset系列

 <script>
        var box = document.getElementById('box')
        var son = document.getElementById('son')
        console.log(box.offsetTop);  //100  box距离浏览器顶部的距离
        console.log(box.offsetLeft); //100  box距离浏览器左边的距离
 		console.log(box.offsetWidth); //330   = box的width(300) + border(10) + padding(20)
        console.log(box.offsetHeight);//330   = box的height(300) + border(10) + padding(20)
        console.log(son.offsetTop); //135  son距离浏览器顶部的距离
        console.log(son.offsetLeft);//135  son距离浏览器左边的距离
 		console.log(son.offsetWidth);  //124  = son的width + padding +border
        console.log(son.offsetHeight);//124  = son的height + padding +border
 </script>

client系列

 		console.log(box.clientTop);//5 内容到边框的距离  相当于border的高度
        console.log(box.clientLeft);// 5 内容到边框的距离  相当于border的宽度
        console.log(box.clientWidth);//320  盒子的width + 盒子的padding
        console.log(box.clientHeight);//320 盒子的height + 盒子的padding

scroll系列

console.log(box.scrollLeft) // 有横向滚动条时  为  内容向左滚出去的距离
console.log(box.scrollTop) // 有竖向滚动条时  为  内容向上滚出去的距离
console.log(box.scrollWidth) //整个文本内容的宽度
console.log(box.scrollHeight)//整个文本内容的高度