JS获取元素位置与大小

最新推荐文章于 2023-09-26 16:31:10 发布
最新推荐文章于 2023-09-26 16:31:10 发布
阅读量628 收藏
点赞数 2
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web00_11/article/details/121746894
版权

JS获取元素位置与大小

位置

clientX / clientY

  • 鼠标相对于浏览器可视窗口的坐标位置

    e.clientX
e.clientY

offsetX / offsetY

  • 鼠标相对于元素自身左上角的坐标位置

    e.offsentX
e.offsetY

pageX / pageY

  • 鼠标相对于文档区域的坐标位置

    e.pageX
e.pageY

screenX / screenY

  • 鼠标相对于屏幕的坐标位置

    e.screenX
e.screenY

offsetTop / offsetLeft

  • 定位子元素相对于定位父元素的位置
  • 定位元素在页面中的位置
    元素.offsetTop
元素.offsetLeft

scrollTop / scrollLeft

  • 文档卷起位置，可用来做回到顶部操作
    元素.scrollTop
元素.scrollLeft

大小

clientWidth / clientHeight

  • 元素大小，包括 width+padding
    元素.clientWidth
元素.clientHeight

offsetWidth / offsetHeight

  • 元素大小，包括 width+padding+border
    元素.offsetWidth
元素.offsetHeight

scrollWidth / scrollHeight

  • 元素大小，包括 width+padding+溢出部分
    元素.scrollWidth
元素.scrollHight
新时代农民工Top
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用JavaScript获取DOM元素位置和尺寸大小的方法
10-27
本篇文章，小编为大家介绍关于用JavaScript获取DOM元素位置和尺寸大小的方法，有需要的朋友可以参考一下
js获取元素宽高和位置的几种方法&&点击事件坐标
tinfengyee的博客
02-04 3457
一.获取宽高： 1.行内样式获取宽高： var dom= document.getElementById("div"); var divWidth = dom.style.width; var divHeight = dom.style.height; 注：只能通过行内样式才能获取到。获取到的元素宽高不包括padding和border 2.offset/client/scroll方法获取： va...
javascript获取元素的位置坐标和尺寸
C语言专栏
09-22 1216
示例代码： function getLeft(e){ var offset=e.offsetLeft; if(e.offsetParent!=null) offset+=getLeft(e.offsetParent); return offset; } function getTop(e){ var offset=e.offsetTop; if(e.offsetParent!=null) offset+=getTop(e.offsetParent); return offs..
JS——事件详情（鼠标事件：clientX、clientY的用法）
weixin_30621711的博客
06-01 696
鼠标位置 》可视区位置：clientX、clientY 跟着鼠标移动的div案例 代码如下图： 这个案例，运用到前一篇文章中的event事件来处理。获取div的left和top值，当鼠标移动时，div的left和top值跟着鼠标位置改变而改变。（注意的是：需要给div设置绝对定位） 演示效果如下图： 但是！！！ 当我给body设置高度时，改变body的高度，这个案例效...
js获取元素位置
SnowBeatRain的博客
11-12 1341
1、内高度、内宽度： 内边距 + 内容框 clientWidth clientHeight 2、外高度，外宽度： 边框 + 内边距 + 内容框 offsetWidth offsetHeight 3、上边框、左边框 clientTop clientLeft 4、元素的大小及其相对于视口的位置 getBoundingClientRect() //x\y:元素的左上角和父元素左上角...
JS关于元素的样式--clientXX,offsetXX,scrollXX，pageXX区别
qq_44604924的博客
08-15 489
1.clientWidth/clientHeight:用于获取元素的可见宽度和高度，返回的值只是数字，不带px，可直接用于计算，获取的宽度和高度包括内容区（content）和内边距(padding)。 用法：box1.clientHeight; (用于获取高度，box1是获取的dom元素)获取宽度同获取高度，如果要进行设置则 box1.clientHeight=200; clientX/clientY：用于获取鼠标相对于浏览器可视区域x轴/y轴的坐标；用法：event.clientX; 2.offsetW
js的clientX、pageX、screenX等方法来获取鼠标坐标详解
最新发布
weixin_41652495的博客
09-26 1421
记录js的clientX、pageX、screenX
JavaScript获取元素尺寸和大小操作总结
10-24
本文总结了使用JavaScript获取指定元素大小、位置的几种方式。如果你用的是JQuery，则获取元素大小是非常简单的。但是我们还是有必要知道如何通过原生JavaScript来获取,需要的朋友可以参考下
JavaScript获取指定元素位置的方法
10-24
本篇文章将深入探讨几种方法，通过JavaScript获取元素在页面中的位置，并着重讲解`left`、`scrollLeft`、`top`、`scrollTop`和`offsetHeight`等属性的用法。 首先，我们要理解元素位置的概念。一个元素在页面中的...
原生JS获取元素集合的子元素宽度实例
10-20
本文主要对原生JS获取元素集合的子元素宽度的实现方法进行介绍，代码详细，具有很好的参考价值，需要的朋友一起来看下吧
原生JS获取元素的位置与尺寸实现方法
11-27
4、元素的大小及其相对于视口的位置 getBoundingClientRect() //x\y:元素的左上角和父元素左上角的距离 //width/height:边框 + 内边距 + 内容框 //top:元素的上边界和父元素上边界的距离 //left:元素的左边界和父...
JS-获取元素的方法-如果不用事件的话，js必须放在元素的后面才能访问到元素
dxm809的博客
02-08 270
document.getElementById('Id') document.getElementsByName('name') document.getElementsByClassName('className') document.getElementsByTagName('input')   <!DOCTYPE html> <html> <head&...
dom元素、鼠标元素位置clientX、clientY、offsetX、offsetY、screenX、screenY、pageX、pageY
八佾舞于庭
11-15 6397
event.clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 (可见区域) event.clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 （可见区域） event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 （触发事件的元素,ie,chrom...
DOM入门（三）
qq_54054566的博客
03-31 755
获取事件对象 事件对象是什么 也是个对象，这个对象里有事件触发时的相关信息 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息 如何获取 在事件绑定的回调函数的第一个参数就是事件对象 一般命名为event、ev、e 常见事件对象属性 type 获取当前的事件类型 clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置 offsetX/offsetY 获取光标相对于当前DOM元素左上角的位置 key 用户按下的键盘键的值 现在不提倡使用keyCode 事件流和两
JS中 PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
qq_43631129的博客
07-05 6688
PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
js 获取元素坐标 和鼠标点击坐标
qq_33207223的博客
04-26 1011
js 获取点击时间鼠标坐标。js 获取元素的位置。
（4）元素可视区client系列、立即执行函数
weixin_59598992的博客
01-23 231
client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 element.clientWidth 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位 element.clientHeight 返回自身包括padding、内容区的高度，不含边框，返回数值不带单位 element.clientTop 返回元素上边框的大小 element
js计算滚轮滚动到导航组件时吸顶
qq_41411324的博客
02-03 320
页面： 吸顶方法：
JS总结——获取元素的各种高度宽度
qq_53008257的博客
05-15 939
由于该内容属于记忆性内容，因此这次就copy了一下别人的博客 鼠标的横坐标，X轴:　　event.clientX; 鼠标的竖坐标，Y轴:　　event.clientY; 网页可见区域宽:　　 document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域高(包括边线的宽)：document.body.offsetHeight; 网页正文全文宽:　　 document.body.scr...
如何获取一个元素的大小和位置
04-27
您可以使用JavaScript中的`getBoundingClientRect()`方法来获取元素的大小和位置。该方法返回一个包含元素位置和大小信息的DOMRect对象。例如，以下代码将获取一个id为“myElement”的元素的位置和大小信息： ``` var element = document.getElementById("myElement"); var rect = element.getBoundingClientRect(); console.log(rect.width); console.log(rect.height); console.log(rect.top); console.log(rect.bottom); console.log(rect.left); console.log(rect.right); ``` 其中，`rect.width`和`rect.height`属性分别是元素的宽度和高度，`rect.top`和`rect.bottom`属性表示元素顶部和底部相对于视口的距离，`rect.left`和`rect.right`属性表示元素左侧和右侧相对于视口的距离。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值