javascript - 如何使用 JavaScript 获取元素的网格坐标？

Question

假设我有一个 3 列的 CSS-Grid。有没有办法使用 JavaScript 获取自动放置元素的 grid-row 和 grid-column？

例子:

console.log($('#test').css('grid-row'), $('#test').css('grid-column'));
// expected output: 2 3 
// actual output: two empty strings

.grid {
  display: grid;
  grid-template-columns: repeat( 3, 1fr);
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div id="test"></div>
  <div></div>
  <div></div>
  <div></div>
</div>

这是示例的 JSFiddle:https://jsfiddle.net/w4u87d2f/7/

在这个例子中，我可以通过对元素进行计数并知道网格有三列来解决这个问题:

grid-column = $('#test').index() % 3 + 1;
grid-row = Math.ceil( $('#test').index() / 3 )

但这只适用于非常简单的网格，也意味着我必须考虑改变列数的断点。

编辑:这不是 Retrieve the position (X,Y) of an HTML element 的副本，因为我对像素坐标不感兴趣，但对 CSS-Grid 中的行号和列号感兴趣。

Answer 1

上面的答案是一个很好的开始，并且使用了 jQuery。这是一个纯 Javascript 等价物，如果您指定了第一个子元素的网格列(例如在您指定月份的第一天的日历中)，还会实现一个“偏移量”

function getGridElementsPosition(index) {
  const gridEl = document.getElementById("grid");

  // our indexes are zero-based but gridColumns are 1-based, so subtract 1
  let offset = Number(window.getComputedStyle(gridEl.children[0]).gridColumnStart) - 1; 

  // if we haven't specified the first child's grid column, then there is no offset
  if (isNaN(offset)) {
    offset = 0;
  }
  const colCount = window.getComputedStyle(gridEl).gridTemplateColumns.split(" ").length;

  const rowPosition = Math.floor((index + offset) / colCount);
  const colPosition = (index + offset) % colCount;

  //Return an object with properties row and column
  return { row: rowPosition, column: colPosition };
}

function getNodeIndex(elm) {
  var c = elm.parentNode.children,
    i = 0;
  for (; i < c.length; i++) if (c[i] == elm) return i;
}

function addClickEventsToGridItems() {
  let gridItems = document.getElementsByClassName("grid-item");
  for (let i = 0; i < gridItems.length; i++) {
    gridItems[i].onclick = (e) => {
      let position = getGridElementsPosition(getNodeIndex(e.target));
      console.log(`Node position is row ${position.row}, column ${position.column}`);
    };
  }
}

addClickEventsToGridItems();

这是一个corresponding Pen显示它在具有指定偏移量的日历上的运行情况。