假设我有一个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中的行和列编号感兴趣。
3条答案
按热度按时间j13ufse21#
上面的答案是一个很好的开始,并使用jQuery。这是一个纯JavaScript的等价物,如果您指定了第一个子元素的网格列(例如在日历中指定了每月的第一天),它还实现了一个“偏移量”
下面是一个corresponding Pen,它在日历上以指定的偏移量显示了它的运行情况。
v1l68za42#
lc8prwob3#
这里另一个解决方案考虑到列跨度