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

最新推荐文章于 2024-05-04 14:55:11 发布
最新推荐文章于 2024-05-04 14:55:11 发布
阅读量238 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48462578/article/details/115448053
版权

监听页面滚动事件

  • $(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

小蔡来了
关注
专栏目录
javascript获取元素离文档各边距离的方法
10-24
总结来说，使用JavaScript获取元素离文档各边距离的方法主要涉及`offset()`、`scrollTop()`、`scrollLeft()`、`height()`、`width()`以及`outerHeight()`和`outerWidth()`等方法的结合运用。通过这些方法，我们可以...
用JavaScript获取DOM元素位置和尺寸大小的方法
10-27
此外，还有一些其他的属性和方法可以帮助我们获取更复杂的位置信息，比如`getBoundingClientRect()`，它返回一个对象，其中包含了元素相对于视口的顶部、底部、左侧和右侧的距离，这在处理页面滚动时非常有用。...
JS获取页面的各种距离总结
stanwuc的博客
09-20 6254
1.screen系列 screen.width:屏幕的宽度 screen.height:屏幕的高度
js序获取两地距离
weixin_44387746的博客
05-21 219
// 判断两经纬度之间的距离 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 711
/* * offsetHeight:元素的大小+padding+border,不包含margin * clientHeight:,元素的大小+padding * offsetTop: 返回元素的上外缘距离最近采用定位父元素‘内壁’的距离，如果父元素中没有采用定位的， * 则继续往上走查找是否有定位的父级元素。【按照绝对定位的去理解就好了】 * scrollTop: 往下拉滚动条...
JS、JQuery获取各种高度和元素距离
ksx2333的博客
04-01 5042
文章目录前言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 442
Javascript 获取鼠标当前的位置实现方法
10-21
在JavaScript中，获取鼠标当前的位置是常见的需求，尤其是在实现交互式网页应用时。本文将详细解释如何使用JavaScript来实现这一功能，主要涉及三个坐标...希望本文能对您在实现JavaScript获取鼠标位置功能时有所帮助。
JavaScript获取指定元素位置的方法
10-24
本篇文章将深入探讨几种方法，通过JavaScript获取元素在页面中的位置，并着重讲解`left`、`scrollLeft`、`top`、`scrollTop`和`offsetHeight`等属性的用法。 首先，我们要理解元素位置的概念。一个元素在页面中的...
js 原生获取一个元素的距离，比较全的api
qq_34849240的博客
06-15 1424
js 原生获取一个元素的距离，比较全的apidocument.getElementById().getBoundingClientRect()值的格式为DOMRECT { bottom : 500 , height : 17 , left : 311.5 , right : 391.5 , top. : 483 , width : 80,...
JS高级使用3.0——JS中获取页面的高度、距离顶部的距离
最新发布
蓝桉
05-04 2056
获取距离顶部的距离可视区高度滚动条总高度滚动页面scroll()scrollTo()scrollBy()
Js获取页面的各种宽高与距离
weixin_43743804的博客
04-04 670
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 1940
分享一个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 4715
rectObject = object.getBoundingClientRect(); 返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合 。 DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width
js 获取dom距离
qq_36940740的博客
08-10 1517
dom.offsetTop ： 含义：获取子dom相对于父dom的距离（距离上方或上层控件的上边框的位置） 需求：获取dom距离页面顶部的距离（此距离并非是dom距离浏览器顶部的距离） 应用：因为页面布局就是盒子套盒子，所以可以直接使用递归把父盒子都遍历一遍（会有误差需要自己把获得的数据修饰一下），这个时候不管怎么滑动页面，获取的距离是不变的，然后通过相对父组件的位置进行定位。 我的当前需求为：点击某个按钮，展示一个盒子，盒子需要在按钮的下方。由于按钮的上层盒子使用了position:sticky，
精通JavaScript window对象：方法与属性详解
"window对象属性和方法详解" 在Web开发中，`window`对象是JavaScript中的顶级对象，它...了解并熟练运用这些`window`对象的属性和方法，将使你在编写JavaScript代码时更加游刃有余，能够构建出更丰富的用户交互体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值