JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<div id="xxx" style="width: 100px; height: 50px; background: red;">
  xxx
</div>

JavaScript

let element = document.getElementById('xxx');

let eHeight = element.style.height; console.log(eHeight);
let body = document.body;
getElementCenter(body) 


function getElementCenter(element) {
  const rect = element.getBoundingClientRect(); console.log(rect);

  // Calculate the center coordinates
  const centerX = rect.left + rect.width / 2;
  const centerY = rect.top + rect.height / 2;

  // Apply translation to the element
  element.style.transform = 'translateX(' + centerX + 'px)';

  return { x: centerX, y: centerY };
}