html获取元素坐标,获取HTML元素的真正位置与大小

使用HTML元素的style.left,style.top,style.width,style.height以及width,height属性,都不能获得元素的真正位置与大小,这些属性取出来的都是原来的设置值,例如

要取得HTML元素的真正位置与大小,只能通过offsetLeft,offsetTop,clientWidth,clientHeight,offsetWidth,offsetHeight属性,其中offsetLeft与offsetTop分别是当前元素在父元素内的相对左坐标与相对顶坐标,要取得绝对坐标,还需要用到offsetParent属性,改属性取得当前元素的父元素。要取得绝对坐标,就必须依次获得父元素的相对坐标,直到父元素为空,然后把所有相对坐标加起来,得到当前元素的绝对坐标。

最常见的是日期选择框,当点击按钮时弹出日期选择框总是在按钮的旁边,这个选择框的坐标,就是根据按钮的坐标以及按钮的offsetWidth,offsetHeight来取得的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要用 JS 绘制可视化矩形,可以使用 HTML5 的 Canvas 元素。下面是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>绘制矩形</title> </head> <body> <canvas id="myCanvas" width="400" height="400"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var rect = {}; var drag = false; function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#FF0000"; ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h); } canvas.addEventListener("mousedown", function(e) { rect.startX = e.pageX - canvas.offsetLeft; rect.startY = e.pageY - canvas.offsetTop; drag = true; }); canvas.addEventListener("mouseup", function(e) { drag = false; }); canvas.addEventListener("mousemove", function(e) { if (drag) { rect.w = (e.pageX - canvas.offsetLeft) - rect.startX; rect.h = (e.pageY - canvas.offsetTop) - rect.startY; draw(); } }); </script> </body> </html> ``` 这段代码会在页面上创建一个 400 x 400 的 Canvas 元素,并且监听鼠标事件,当用户按下鼠标左键并移动,会绘制一个红色的矩形。你可以通过鼠标拖动来改变矩形的大小位置。 要获取矩形的坐标,只需要在鼠标松开的事件处理函数中,打印出 rect 对象的值即可: ```javascript canvas.addEventListener("mouseup", function(e) { drag = false; console.log(rect); }); ``` 这样就可以在控制台中看到 rect 对象的 startX、startY、w 和 h 属性,它们分别表示矩形左上角的坐标和宽度、高度。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值