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

I have this example that displays some arbitrary text from the user:

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

I want to know how to get the X and Y position of HTML elements such as @article.text using Ruby.

CodePudding user response：

Set some id to element

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

And get position in JS with getBoundingClientRect

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)

Reference:

https://javascript.info/coordinates