【JS与JQ】原生JS(clientTop/clientLeft,offsetTop/offsetLeft,scrollTop/scrollLeft)

JS和JQuery位置方法汇总

前言总结：

HTML：

<div class="gFather"><div class="father"><div class="child"> JS--JQ的距离/位置总结<br>JS--JQ的距离/位置总结<br>JS--JQ的距离/位置总结<br>JS--JQ的距离/位置总结<br>JS--JQ的距离/位置总结<br>JS--JQ的距离/位置总结<br>JS--JQ的距离/位置总结<br>JS--JQ的距离/位置总结<br>JS--JQ的距离/位置总结<br>JS--JQ的距离/位置总结<br>JS--JQ的距离/位置总结<br>JS--JQ的距离/位置总结<br>JS--JQ的距离/位置总结<br></div></div></div><button class="btn">获取</button><button class="btn1">设置</button>

CSS：

*{margin: 0;padding: 0;}body{border: 20px solid #00ea00;margin: 10px 0 0 20px;padding: 10px 0 0 20px;height: 2000px;width: 2000px;}.gFather{position: relative;border: 20px solid red;width: 400px;height: 300px;left: 20px;background-color: darkorchid; }.father{position: absolute;width: 300px;height: 200px;border: 20px solid #ee8096;background: skyblue;margin-left: 20px ;margin-top: 30px;}.child{position: absolute;overflow: auto;white-space: nowrap;width: 100px;height: 100px;padding: 10px;margin: 20px;top: 20px;left: 10px;border: 10px solid #000;background-color: rgb(133, 163, 87);}button{position: fixed;bottom: 20px;}.btn{right: 80px;}.btn1{right: 40px;}

JS位置方法总结：

clientTop||clientLeft（当前元素padding内边距到当前元素的border的距离，也就是当前元素border的宽度/高度）；
offsetTop||offsetLeft（当前元素到其直接/非直接父级元素（如果没有那就body）的外边距距离 || 具体说就是当前元素的border最外层到其父级border的最内层,注意父级是body的,都是距离绝对窗口的最边缘,也就是说跟scroll滚动的位置无关）；
scrollTop||scrollLeft（当前元素中的内容超出其宽高的时候，元素被卷起的高度和宽度值）；

JS对应的代码：

window.onload = function(){/* JS-[距离]方法 clientTop/clientLeft || offsetTop/offsetLeft || scrollTop/scrollLeft */var $gFather = document.getElementsByClassName("gFather")[0];var $father = document.getElementsByClassName("father")[0];var $child = document.getElementsByClassName("child")[0];var btn = document.getElementsByTagName("button")[0];var btn1 = document.getElementsByTagName("button")[1];btn.onclick = function(){// 1.clientTop||clientLeft（当前元素padding内边距到当前元素的border的距离，也就是当前元素border的宽度/高度）console.log("JS--gFather--clientTop",$gFather.clientTop); // 20 || 20console.log("JS--father--clientTop",$father.clientTop); // 20 || 40console.log("JS--father--clientLeft",$father.clientLeft); // 20 || 40console.log("JS--child--clientTop",$child.clientTop); // 10 || 10console.log("JS--child--clientLeft",$child.clientLeft); // 10 || 10// 2.offsetTop||offsetLeft（当前元素到其直接/非直接父级元素（如果没有那就body）的外边距距离 || 具体说就是当前元素的border最外层到其父级border的最内层,// 注意父级是body的,都是距离绝对窗口的最边缘,也就是说跟scroll滚动的位置无关）console.log("JS--gFather--offsetTop",$gFather.offsetTop); // 40 || 40console.log("JS--gFather--offsetLeft",$gFather.offsetLeft); // 80 || 80console.log("JS--father--offsetTop",$father.offsetTop); // 30 || 45console.log("JS--father--offsetLeft",$father.offsetLeft); // 20 || 35console.log("JS--child--offsetTop",$child.offsetTop); // 40 || 25console.log("JS--child--offsetLeft",$child.offsetLeft); // 30 || 30// 3.scrollTop||scrollLeft（当前元素中的内容超出其宽高的时候，元素被卷起的高度和宽度值）console.log("JS--child--scrollTop",$child.scrollTop);console.log("JS--child--scrollLeft",$child.scrollLeft);}// 3.1监听scrollTop||scrollLeft（动态输出当前属性的滚动距离）$child.onscroll = function(){console.log("JS--child--scrollTop:" + this.scrollTop); // 0-190console.log("JS--child--scrollLeft:" + this.scrollLeft); // 0-85 || 0-5}btn1.onclick = function(){console.log("-------------------设置距离--------------------")$gFather.style.padding = "15px";$father.style.border = "40px solid #ee8096";$child.style.top = "5px";$child.style.width = "180px";}
}

JQuery位置方法总结：

offset().left/offset().top（与父子级无关,此时的offset都是相对于当前绝对窗口的定位 || 同样和scroll值所在的位置无关）；
position().left/position().top（与父子级有关,此时的position是相对于当前元素样式中的top/left的值,对于margin/padding不能进行识别,所以如果元素的自身没有这两个值,则获取为0 || 注意这个position只能读取,并且无关父级是body时此时padding/margin/top/left都算进去）；
scrollTop()/scrollLeft()（可以获取当前页面滚动的距离,也可以设置当前跳转的距离）；

JQuery对应的代码：

<script src="../jquery-1.12.2.js"></script>
$(function(){$("button").eq(0).click(function(){// 1.offset().left/offset().top（与父子级无关,此时的offset都是相对于当前绝对窗口的定位 || 同样和scroll值所在的位置无关）console.log("JQ--gFather--offset().top",$(".gFather").offset().top);  // 40 || 45console.log("JQ--gFather--offset().left",$(".gFather").offset().left); // 80 || 85console.log("JQ--father--offset().top",$(".father").offset().top); // 0 || 80console.log("JQ--father--offset().left",$(".father").offset().left); // 0 || 125console.log("JQ--child--offset().top",$(".child").offset().top); // 20 || 150console.log("JQ--child--offset().left",$(".child").offset().left); // 10 || 10// 2.position().left/position().top（与父子级有关,此时的position是相对于当前元素样式中的top/left的值,对于margin/padding不能进行识别,// 所以如果元素的自身没有这两个值,则获取为0 || 注意这个position只能读取,并且无关父级是body时此时padding/margin/top/left都算进去）console.log("JQ--gFather--position().top",$(".gFather").position().top);  // 40 || 45console.log("JQ--gFather--position().left",$(".gFather").position().left); // 80 || 85console.log("JQ--father--position().top",$(".father").position().top); // 30 || -15console.log("JQ--father--position().left",$(".father").position().left); // 20 || 0console.log("JQ--child--position().top",$(".child").position().top); // 40 || 30console.log("JQ--child--position().left",$(".child").position().left); // 30 || -155// 3.scrollTop()/scrollLeft()（可以获取当前页面滚动的距离,也可以设置当前跳转的距离）console.log("JQ--child--scrollTop()",$(".child").scrollTop());console.log("JQ--child--scrollLeft()",$(".child").scrollLeft());console.log("JQ--body(IE)/html--scrollTop()",$("html,body").scrollTop());console.log("JQ--body(IE)/html--scrollLeft()",$("html,body").scrollLeft());})// 3.1监听scrollTop()/scrollLeft()的值（动态输出当前属性的滚动距离）$(".child").scroll(function(){console.log("当前滚动的scrollTop:" + $(".child").scrollTop());console.log("当前滚动的scrollLeft:" + $(".child").scrollLeft())})$("button").eq(1).click(function(){console.log("-----------------设置距离-------------------")// 1.offset().top/offset().left可以直接修改元素的值,注意写法参数不是string$("body").eq(0).css({border:"25px solid #00ea00"});$(".father").offset({top:80});$(".child").offset({top: 150,left: 10})// 2.position().top/position().left不可以设置元素的值,只能读取// $(".father").position({//     top:10// })// 3.scrollTop()/scrollLeft()可以设置值$(".child").scrollTop(50);$(".child").scrollLeft(20);$("body,html").scrollTop(0);$("body,html").scrollLeft(0);})
})

【JS与JQ】原生JS(clientTop/clientLeft,offsetTop/offsetLeft,scrollTop/scrollLeft)相关推荐

（30个原生js挑战）原生js实现钟表
紧接着昨天的实例,第二个是原生js实现钟表特效. 首先介绍下大致思路,首先要用css把时针分针和秒针画出来.然后根据钟表中,角度和时间的算法关系. 设置角度. 最后使用定时器,每秒运行一次. 需要注意 ...
原生js更改html,原生js更改css样式的两种方式
原生js更改css样式的两种方式发布时间:2020-08-30 01:46:17 来源:脚本之家阅读:148 作者:外婆的彭湖湾下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过 ...
php日期控件calendar.js,轻量级的原生js日历插件calendar.js使用指南
使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤本日历插件支持cmd模块化如下调用:xvDate( ...
html js 设置样式,原生js设置样式笔记：JS设置CSS样式的几种方式
document(id名).style.backgroundColor = "ren" css里的属性有-的就去掉将首字母大写. js如何添加CSS样式中的class添加属性用J ...
原生js输出html5,原生JS+HTML5实现的可调节写字板功能示例
本文实例讲述了原生JS+HTML5实现的可调节写字板功能.分享给大家供大家参考,具体如下: 前面一篇介绍了<JS+HTML5 Canvas实现简单的写字板功能>,这里再介绍另一种实现方法. ...
JS｜使用原生js实现拦截器
除夕快乐啊,最近一直在开发前后端都没时间写博客了,正好把最近研究的拦截器拿出来卖弄一下- 什么是拦截器? 通俗点讲,就是在某一组条件条件未达到的情况下,禁止访问某一组页面:咱们举个栗子,我有一个页面, ...
html js 动画效果,原生js html5 canvas 3D云动画效果
特效描述:原生js html5canvas 3D云动画效果.3D云效果,叼炸天!可用鼠标控制方向!本地要localhost才能正常演示代码结构 1. 引入JS 2. HTML代码 varying v ...
js：基于原生js的上啦下啦刷新功能
链接:https://www.jianshu.com/p/a8392115e6f0演示地址:http://wonghan.cn/iscroll-demo/html:<body><di ...
原生js获取document_原生JS常用API整理
Anchor 对象:指HTML超链接 1.修改一个链接的文本,链接和target //html部分访问 Microsoft 改变超链接的文本和 URL.也改变 target 属性.target 属性 ...

【JS与JQ】原生JS(clientTop/clientLeft,offsetTop/offsetLeft,scrollTop/scrollLeft)

JS和JQuery位置方法汇总

前言总结：

【JS与JQ】原生JS(clientTop/clientLeft,offsetTop/offsetLeft,scrollTop/scrollLeft)相关推荐

最新文章

热门文章