假设我有一个三列的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 )
但这仅适用于非常简单的网格,并且意味着我必须考虑会更改列数的断点。
编辑:这不是检索HTML元素位置(X,Y)的重复,因为我不感兴趣像素坐标,而是在CSS-Grid内的行和列编号。