html的对象可以通过getBoundingClientRect()取得其真实位置，例子如下：

最新推荐文章于 2023-06-09 14:06:35 发布
转载 最新推荐文章于 2023-06-09 14:06:35 发布 · 110 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/Godblessyou/archive/2010/07/17/1779431.html

本文通过具体的HTML和JavaScript代码示例介绍了如何进行页面元素的布局和定位，特别是使用JavaScript来获取元素的位置信息。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<table width="200" border="1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><table width="362" border="1">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="135">&nbsp;</td>
        <td>&nbsp;</td>
        <td><table width="200" border="1" cellpadding="0" cellspacing="0" bordercolor="#0000FF" id="aa" style="border-collapse:collapse;">
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </table></td>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>
<script language="javascript">
 //alert(aa.getBoundingClientRect()["right"]);
 alert(aa.getBoundingClientRect().right);
 for (var i in aa.getBoundingClientRect()){
  document.writeln(i+"="+aa.getBoundingClientRect()[i]);
 }
</script>
</body>
</html>



本文来自：http://blog.youkuaiyun.com/sungcong/archive/2005/12/09/547848.aspx

转载于:https://www.cnblogs.com/Godblessyou/archive/2010/07/17/1779431.html

自学js第十五天:event坐标偏移量位置和window对象
weixin_47592060的博客
05-07 1742
一.Event对象集合中的鼠标按下或者点击时的相对位置:!=元素的自身位置 1.鼠标event对象给我们展示了 client / offset / page / screen系列的X Y坐标 可以用于在不同需求下获取用户鼠标的相对位置.(相对于各种参考物体的位置) 2.首先先了解鼠标event其实是一个事件对象集合来的,里面包含各种各样的鼠标事件的信息.其中就有当前用户点击鼠标触发事件的相对位置坐标. 比如如下的pageX,和 pageY [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来
现代浏览器观察者 Observer API 指南
前端劝退师
10-24 1971
前言前段时间在研究前端异常监控/埋点平台的实现。在思考方案时，想到了浏览器自带的观察者以及页面生命周期API 。于是在翻查资料时意外发现，原来现代浏览器支持多达四种不同类...
HTML DOM getBoundingClientRect（）方法
weixin_45785873的博客
10-30 1084
getBoundingClientRect（）方法 今天朋友问到了这个方法，为了防止以后使用忘记，先写下来，哦哈哈哈哈~。 官方解释：Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。 语法：rectObject = object.getBoundingClientRect(); 返回对象：DOMRect 。对象包含了一组用于描述边框的只...
html检测指定位置元素,js中getBoundingClientRect获取某个html元素相对于视窗的位置...
weixin_33048525的博客
06-04 307
用习惯了jQuery的人，一般会用offset().top来获取元素相对于窗口的位置，其实我们还有一个原生的更好用的方法：getBoundingClientRect1.getBoundingClientRect的作用getBoundingClientRect用于获取某个html元素相对于视窗的位置集合。执行 object.getBoundingClientRect();会得到元素的top、righ...
JS获得元素相对位置坐标getBoundingClientRect()
weixin_33809981的博客
03-20 887
  getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。 1.语法：这个方法没有参数。 rectObject = object.getBoundingClientRect(); function inputKeydown(e){　　console.log(e.target.getBounding...
【html】获取元素的绝对定位&相对定位（getBoundingClientRect）
sylbiubiubiu的博客
09-01 1790
【html】获取元素的绝对定位&相对定位（getBoundingClientRect）
vue 点击获取dom元素的位置 getBoundingClientRect()
周家大小姐
06-11 1万+
html: <ul> <li v-for="(tag,index) in tags" :key="index"> <img :src="tag.image" alt=""> <p>{{tag.label}} <i cl...
【EasyBuilder Pro终极指南】：掌握所有元件使用与高级技巧
!... # 摘要 EasyBuilder Pro作为一款强大的开发工具，对于快速构建用户界面和应用程序提供了丰富的功能。本文旨在为初学者提供快速入门指南，并深入探讨了EasyBuilder Pro的元件库，包括元件的基础知识、分类、界面...
情人节3D动画特训：让你的爱情故事动起来
![情人节3D动画特训：让你的爱情... ...# 1.... 在当今数字时代，3D动画制作已成为视觉艺术中不可或缺的一部分。它将艺术性与技术性完美融合，创造出令人惊叹的视觉奇观。本章将带您揭开3D动画的神秘面纱，从艺术和技术两个维
前端200道面试题及答案（更新中）
热门推荐
m0_65450343的博客
06-11 11万+
目录html相关说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？link和@import的区别浏览器如何实现不同标签页的通信？iframe的优缺点canvas做项目用到哪些h5新特性和css3新特性？用localstorage和sessionStorage写过什么？如何解决页面内容加载缓慢的问题？cookie的特点*页面渲染过程css相关javascript以及es6相关http相关浏览器bootstrapvue相关node相关微信小程序reac
getBoundingClientRect获取元素位置以及在Vue中的使用
水车
10-23 651
1. 前言 本文主讲内容为：getBoundingClientRect()函数说明以及在原生JS中和Vue环境下如何使用 2. getBoundingClientRect函数 getBoundingClientRect 函数使用在dom元素中 Element.getBoundingClientRect() 方法返回一个DOMRect对象，其中包含了盒子的大小及其相对于浏览器窗口的位置。 { ...
getBoundingClientRect().top与offsetTop的区别
Wangdr的博客
06-09 4031
返回当前元素相对于 offsetParent（position为非static且距离自己最近的祖先元素） 节点顶部边界的偏移像素值。当监听的是window的滚动条时，元素的getBoundingClientRect().top会原来越小，而offsetTop一直不变。楼层导航，懒加载，返回顶部按钮等等，只要涉及scroll事件，都无法避免的要去计算某个元素距离视窗顶部的距离。且这个距离不随滚动条滚动变化，也就是说这个距离开始是多少就是多少，是个恒定值（包括滚动条卷起的部分）1、监听window的滚动条。
使用html元素的getBoundingClientRect来获取dom元素的时时位置和大小
weixin_30387663的博客
11-11 120
使用： var section = $('.section')；这是jquery包装的dom元素，其他前端框架返回的可能也是一个包装元素， 我们需要获得的是里面的html的dom元素 然后：section[0]： 获得html的dom元素 然后： 使用section[0].getBoundingClientRect来获取该元素的时时位置和大小 转载于:https://www...
[转载]getBoundClientRect函数详解
weixin_33755649的博客
12-23 336
原文:http://www.cnblogs.com/2050/archive/2012/02/01/2335211.html 一、定义 getBoundingClientRect 函数是W3C组织在第一版本的W3C CSSOM View specification草案中确定的一个标准方法，在此之前，只有IE浏览器是支持该方法的，W3C在这次草案中把它扶正成为标准，足可以看出...
理解getBoundClientRect()
赵天铭的博客
12-27 7831
概念 getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。 用法 语法：这个方法没有参数。 rectObject = object.getBoundingClientRect(); object就是当前元素 返回值类型： rectObject.top：元素上边到视窗上边的距离; rectObjec...
冒泡获取元素位置
yezitoo的博客
11-29 404
$(document).delegate(".problem_detail_wrap", "mouseover", function (e) { var left = e.target.getBoundingClientRect().left; var top = e.target.getBoundingClientRect().top + 20; $($(this).children()[...
php 获取json对象里的元素个数,js获取json元素数量的方法
weixin_39683025的博客
03-21 1100
js获取json元素数量本文实例讲述了js获取json元素数量的方法。分享给大家供大家参考。具体实现方法如下：代码如下:var keleyijson={"plug1":"myslider","plug2":"zonemenu","plug3":"javascript"}function JSONLength(obj) {var size = 0, key;for (key in obj) {if ...
html鼠标的坐标,HTML知识--鼠标、元素坐标和ClientRect对象属性
weixin_29023471的博客
06-03 354
在这一篇文章中，将会介绍鼠标坐标、元素坐标以及鼠标在指定元素内的坐标。1. 鼠标坐标在触发鼠标相关事件时(如：click、mousemove)，可以通过事件对象获取当前鼠标的坐标。获取的坐标可分为2种：1) MouseEvent.screenX、MouseEvent.screenY ：基于屏幕的X、Y坐标；以屏幕的左上角为0,0起始点。2) MouseEvent.clientX、MouseEven...
js中getBoundingClientRect()方法详解
阿牛哥的博客
08-14 9444
js中getBoundingClientRect()方法详解
取得html div 真实的位置
最新发布
11-01
在JavaScript中，获取HTML `div` 元素的真实位置（即相对于视口的像素坐标），你可以使用`getBoundingClientRect()`方法。这个方法返回一个对象，包含了元素的位置信息，包括top、right、bottom、left属性，以及width、height等。以下是示例代码： ```javascript var divElement = document.getElementById('yourDivId'); // 替换 'yourDivId' 为你需要获取的div元素ID if (divElement) { var rect = divElement.getBoundingClientRect(); var position = { top: rect.top + window.pageYOffset, // 获取距离文档顶部的距离，加上滚动条的高度 left: rect.left + window.pageXOffset, // 获取距离文档左边的距离，加上滚动条的宽度 width: rect.width, height: rect.height }; console.log(position); // 打印出div的位置信息 } else { console.log('Element not found'); } ``` 这里假设你已经通过ID找到了div元素，并且考虑了浏览器窗口的滚动。如果`divElement`不存在，则会打印"Element not found"。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值