检索 Ruby 中 HTML 元素的位置 (X,Y)

Question

我有这个显示用户任意文本的示例：

<html>
 <head></head>
  <body>
     <%= @article.text %>    
  </body>
</html>

我想知道如何使用Ruby.

获取HTML元素的X和Y位置，例如@article.text

Answer 1

给元素设置一些id

<html>
<head></head>
<body>
  <div id="my-id">
    <%= @article.text %>
  </div>
</body>
</html>

并通过 getBoundingClientRect

在 JS 中获得位置

const getCoordinates = (element) => {
  const box = element.getBoundingClientRect()

  return {
    top: box.top + window.pageYOffset,
    right: box.right + window.pageXOffset,
    bottom: box.bottom + window.pageYOffset,
    left: box.left + window.pageXOffset
  }
}

const element = document.getElementById('my-id')

const coordinates = getCoordinates(element)

console.log(coordinates)

参考：

https://javascript.info/coordinates

检索 Ruby 中 HTML 元素的位置 (X,Y)

Retrieve the position (X,Y) of an HTML element in Ruby

html

ruby

dom

position

ruby-on-rails