我有一个 CSS 网格布局，并且想要获取光标下方的单元格位置。 想象一下下面的例子:
如果我的光标位于图像中星星所在的位置，我正在寻找一个返回 {grid-row-start: 2, grid-row-end: 3, grid-column-start :5，网格列结束:6}。
你们中有人知道执行此操作的 native 函数吗？或者我必须自己计算这些值？ 谢谢:)
我的示例的代码如下所示:
<html>
<head>
<style>
.container {
display: grid;
grid-gap: 10px;
background-color: blue;
grid-template-columns: repeat(6, 1fr);
height: 400px;
}
.container div {
background-color: green;
}
.grid-stack-item {
}
</style>
</head>
<body>
<div class="container">
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="2" data-gs-height="1">
<div class="grid-stack-item-content">1</div>
</div>
<div class="grid-stack-item" data-gs-x="2" data-gs-y="0" data-gs-width="2" data-gs-height="2">
<div class="grid-stack-item-content">2</div>
</div>
<div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="1" data-gs-height="1">
<div class="grid-stack-item-content" style="overflow: hidden">3</div>
</div>
<div class="grid-stack-item" data-gs-x="5" data-gs-y="0" data-gs-width="1" data-gs-height="1">
<div class="grid-stack-item-content"> 4</div>
</div>
<div class="grid-stack-item" data-gs-x="0" data-gs-y="1" data-gs-width="1" data-gs-height="1">
<div class="grid-stack-item-content">5</div>
</div>
<div class="grid-stack-item" data-gs-x="1" data-gs-y="1" data-gs-width="1" data-gs-height="2">
<div class="grid-stack-item-content">6</div>
</div>
<div class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="1" data-gs-height="1">
<div class="grid-stack-item-content">8</div>
</div>
<div class="grid-stack-item" data-gs-x="2" data-gs-y="2" data-gs-width="2" data-gs-height="1">
<div class="grid-stack-item-content">9</div>
</div>
<div class="grid-stack-item" data-gs-x="4" data-gs-y="2" data-gs-width="1" data-gs-height="1">
<div class="grid-stack-item-content">10</div>
</div>
<div class="grid-stack-item" data-gs-x="5" data-gs-y="2" data-gs-width="1" data-gs-height="1">
<div class="grid-stack-item-content">11</div>
</div>
</div>
<script>
for(let elm of document.getElementsByClassName('grid-stack-item')){
elm.style['grid-column-start'] = parseInt(elm.getAttribute('data-gs-x')) + 1;
elm.style['grid-column-end'] = parseInt(elm.getAttribute('data-gs-x')) + parseInt(elm.getAttribute('data-gs-width')) + 1;
elm.style['grid-row-start'] = parseInt(elm.getAttribute('data-gs-y')) +1 ;
elm.style['grid-row-end'] = parseInt(elm.getAttribute('data-gs-y')) + parseInt(elm.getAttribute('data-gs-height')) +1;
}
</script>
</body>
</html>
最佳答案
您想要做的是找出鼠标悬停在哪个元素上，然后从该元素获取 window.getCompulatedStyle(element).gridColumnStart (以及其他)。
最简单的方法是向每个 grid-stack-item 元素添加一个 mouseenter 事件。
这是一个粗略的示例:
let currentCellPosition = {
"grid-row-start": null,
"grid-row-end": null,
"grid-column-start": null,
"grid-column-end": null
}
Array.from(document.getElementsByClassName("grid-stack-item")).forEach(element => {
element.addEventListener("mouseenter", () => {
const style = window.getComputedStyle(element);
currentCellPosition = {
"grid-row-start": style.gridRowStart,
"grid-row-end": style.gridRowEnd,
"grid-column-start": style.gridColumnStart,
"grid-column-end": style.gridColumnEnd
}
})
})
在此示例中，currentCellPosition 将始终具有最新的单元格位置。
document.addEventListener("DOMContentLoaded", () => {
const output = document.getElementById("output");
Array.from(document.getElementsByClassName("cell")).forEach(element => {
element.addEventListener("mouseenter", () => {
const style = window.getComputedStyle(element)
output.innerHTML = `
row start: ${style.gridRowStart}
row end: ${style.gridRowEnd}
column start: ${style.gridColumnStart}
column end: ${style.gridColumnEnd}
`;
})
})
});.container {
border: 2px solid green;
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
height: 200px;
width: 100%;
}
.a {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 2;
background-color: lightblue;
}
.b {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 3;
background-color: orange;
}
.c {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 2;
grid-column-end: 3;
background-color: lightgreen;
}<div class="container">
<div class="a cell"></div>
<div class="b cell"></div>
<div class="c cell"></div>
</div>
<p id="output">
</p>关于javascript - 光标位置到 CSS 网格位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59825813/