javascript获取距离常用的方法和属性

最新推荐文章于 2021-05-21 18:15:54 发布

小蔡来了

最新推荐文章于 2021-05-21 18:15:54 发布

阅读量279

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/weixin_48462578/article/details/115448053

javascript 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何使用jQuery和原生JavaScript监听页面滚动，获取元素相对于文档的位置，以及计算元素的高度、宽度和滚动条位置。重点讲解了offset().top、offset().left、scrollTop、scrollLeft等属性的用法，帮助开发者实现更精准的页面交互效果。

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

监听页面滚动事件

$(window).scroll(function(){--这里写代码})

元素距离文档的距离

jquery

offset().top
offset().left

原生

offsetTop
offsetLeft

元素本身的高度宽度

jquery写法

height()
width(）

原生写法

offsetWidth
offsetHeight

获取滚动条距离顶部的高度距离值

jquery写法

$(document).scrollTop()
scrollLeft()

原生写法

scrollTop
scrollLeft
scrollHeight--可滚动的高度

获取鼠标的距离

e.pageX

e.pageY

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小蔡来了

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JS高级使用3.0——JS中获取页面的高度、距离顶部的距离

蓝桉

05-04

3656

获取距离顶部的距离可视区高度滚动条总高度滚动页面scroll()scrollTo()scrollBy()

JS获取页面的各种距离总结

stanwuc的博客

09-20

6550

1.screen系列 screen.width:屏幕的宽度 screen.height:屏幕的高度

参与评论您还未登录，请先登录后发表或查看评论

js序获取两地距离

weixin_44387746的博客

05-21

269

// 判断两经纬度之间的距离 var PI = Math.PI; var EARTH_RADIUS = 6378137.0;//单位M function getRad(d) { return d * PI / 180.0; } function getFlatternDistance(lat1, lng1, lat2, lng2) { lat1 = parseFloat(lat1); lng1 = parseFloat(lng1); lat2 = parseFloat(lat2); ln

JS距离

qq_36800701的博客

06-14

757

/* * offsetHeight:元素的大小+padding+border,不包含margin * clientHeight:,元素的大小+padding * offsetTop: 返回元素的上外缘距离最近采用定位父元素‘内壁’的距离，如果父元素中没有采用定位的， * 则继续往上走查找是否有定位的父级元素。【按照绝对定位的去理解就好了】 * scrollTop: 往下拉滚动条...

JS、JQuery获取各种高度和元素距离

ksx2333的博客

04-01

5257

文章目录前言1 js原生1.1 offset系列1.2 client系列1.3 scroll系列2 jquery写法2.1 offset和position2.2 元素滚动2.2.1 scrollTop()2.2.2 $(document.body).scrollTop+ $(document.documentElement).scrollTop()2.2.3 $('body,html').scrollTop(60)2.3 元素的尺寸2.3.1 内容尺寸与css中设置的响应的属性相同2.3.2 内部尺寸2.

js 各种距离

weixin_38999683的博客

05-27

481

javascript获取元素离文档各边距离的方法

10-24

总结来说，使用JavaScript获取元素离文档各边距离的方法主要涉及`offset()`、`scrollTop()`、`scrollLeft()`、`height()`、`width()`以及`outerHeight()`和`outerWidth()`等方法的结合运用。通过这些方法，我们可以...

用JavaScript获取DOM元素位置和尺寸大小的方法

10-27

此外，还有一些其他的属性和方法可以帮助我们获取更复杂的位置信息，比如`getBoundingClientRect()`，它返回一个对象，其中包含了元素相对于视口的顶部、底部、左侧和右侧的距离，这在处理页面滚动时非常有用。...

Javascript 获取鼠标当前的位置实现方法

10-21

在JavaScript中，获取鼠标当前的位置是常见的需求，尤其是在实现交互式网页应用时。本文将详细解释如何使用JavaScript来实现这一功能，主要涉及三个坐标...希望本文能对您在实现JavaScript获取鼠标位置功能时有所帮助。

JavaScript获取指定元素位置的方法

10-24

本篇文章将深入探讨几种方法，通过JavaScript获取元素在页面中的位置，并着重讲解`left`、`scrollLeft`、`top`、`scrollTop`和`offsetHeight`等属性的用法。首先，我们要理解元素位置的概念。一个元素在页面中的...

js 原生获取一个元素的距离，比较全的api

qq_34849240的博客

06-15

1473

js 原生获取一个元素的距离，比较全的apidocument.getElementById().getBoundingClientRect()值的格式为DOMRECT { bottom : 500 , height : 17 , left : 311.5 , right : 391.5 , top. : 483 , width : 80,...

Js获取页面的各种宽高与距离

weixin_43743804的博客

04-04

745

1、screen系列 screen.width: 屏幕的宽度 screen.height: 屏幕的高度 2、style系列（必须是行内设置的样式才有效） element.style.width: 当前对象的宽度 element.style.height: 当前对象的高度 &...

js获取某个元素距离浏览器的边距

weichangIT的博客

03-05

1万+

知识储备： 1.偏移参照（offsetParent)：　　在理解偏移大小之前，首先要理解offsetParent。人们并没有把offsetParent翻译为偏移父级，而是翻译成定位父级，很大原因是offsetParent与定位有关　　定位父级offsetParent的定义是：与当前元素最近的经过定位(position不等于static)的父级元素，主要分为下列几种情况　　【1】...

js 获取当前元素距离窗口的距离

热门推荐

yuange

01-15

2万+

获取dom到body左侧和顶部的距离-getBoundingClientRect 平时在写js的时候，偶尔会需要用js来获取当前div到 body 左侧、顶部的距离。网上查一查，有很多都是通过offsetTop、offsetLeft来计算出来的。我按照网上的查到的资料用了一次，算出来了一堆错误答案。下面我要分享的这个方法，兼容性很好（ie4都ok），而且很方便，不会算错。这个方法就是 ge...

js 原生js获取一个元素的距离

UnderIcon的博客

11-01

1997

分享一个js 原生获取一个元素的距离，比较全的api： document.getElementById().getBoundingClientRect() 打印效果如下： DOMRect { bottom: 692 height: 600 left: 443 right: 817 top: 92 width: 374 x: 443...

js获取元素的距离父元素、窗口的距离offsetTop,offsetHeight,clientHeight

weixin_34208185的博客

04-10

1万+

前言相信很多项目中都会有这样一个小需求（PC端，移动端则是点击），鼠标移上某个菜单或者某个位置，显示一个弹出框，移开则隐藏弹出框，就是css中hover效果，这种通常做法是每个子菜单下都有一个弹框，父元素相对定位，子元素绝对定位，只需要控制的弹框的显示与隐藏即可，但是，当鼠标移动到边界的菜单上时，弹框可能会超出外部元素的范围，如下图： ...

原生JS获取元素在文档中的位置

张致豪

11-09

1万+

原生JS获取元素在文档中的位置原生JS提供了很多关于元素信息的属性具体就不总结了元素在页面上的位置有绝对位置和相对位置绝对位置网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标。这个绝对位置要通过计算才能得到。首先，每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。

js 获得盒子距离窗口的距离的集合的函数dom.getboundingclientrect()

现在学习也不晚

06-13

4802

rectObject = object.getBoundingClientRect(); 返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合。 DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width

js 获取dom距离

qq_36940740的博客

08-10

1610

dom.offsetTop ：含义：获取子dom相对于父dom的距离（距离上方或上层控件的上边框的位置）需求：获取dom距离页面顶部的距离（此距离并非是dom距离浏览器顶部的距离）应用：因为页面布局就是盒子套盒子，所以可以直接使用递归把父盒子都遍历一遍（会有误差需要自己把获得的数据修饰一下），这个时候不管怎么滑动页面，获取的距离是不变的，然后通过相对父组件的位置进行定位。我的当前需求为：点击某个按钮，展示一个盒子，盒子需要在按钮的下方。由于按钮的上层盒子使用了position:sticky，

掌握JavaScript滚动及盒子属性的常用方法

描述中提到的“制作滚动代码的常用属性，和盒子的属性”指的是在网页开发中利用JavaScript或JQuery实现滚动效果和控制布局中的盒子模型属性。在网页布局中，“盒子”通常指的是具有边框、填充、边距和实际内容区域的...