如果我使用
grid-template-columns: repeat(3, 1fr)
将一些HTML元素放置到一个三列网格中,是否可能用JavaScript找到元素所在的列?一些元素也跨越多行,因此元素的索引不一定与其列匹配。
For example:
const myElement = document.querySelector('div:nth-child(5)');
myElement.style.background = '#f00';
const columnIndex = 1; // How do I find this?
console.log('myElement is in column ' + columnIndex);
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 30px;
}
.item,
.item-large {
padding: 30px;
background: #3cf;
}
.item-large {
grid-row: span 2;
}
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item-large"></div>
<div class="item">Which column am I in?</div>
<div class="item-large"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
myElement.style.gridColumnStart
,但是除非手动设置了样式,否则它会返回一个空字符串。使用getComputedStyle(myElement).gridColumnStart
会产生类似的结果。 - Thomas HigginbothamoffsetLeft
并测量它们的位置来确定列,但似乎应该有更简单的方法。 - Thomas Higginbotham