更新网格行元素

Question

是否可以使用 javascript 更改类中元素的值？

.poTomorrow{
grid-row: 3/span 2;
grid-column: 6/span 1;
}

例如，我是否可以使用 javascript 将网格行的值更改为 4/span 4？

Answer 1

不，它不是，但您可以更改 html 元素类或直接向其添加内联样式。

Answer 2

这是你想要的吗？

let $elem = $('.poTomorrow');
console.log('grid-row', $elem.css('grid-row'));
$elem.css('grid-row', '4/span 4');
console.log('grid-row', $elem.css('grid-row'));

.poTomorrow {
grid-row: 3/span 2;
grid-column: 6/span 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="poTomorrow">poTomorrow</p>

Answer 3

我很惊讶其他答案没有提到这一点，但你可以简单地使用纯JS访问对象的样式。

const htmlElement = document.querySelector("#elementId");
htmlElement.style.gridRow = "4 / span 4";

但是，对于类，您可能需要遍历它们以进行更新。

const classElements = document.querySelectorAll(".poTomorrow");
for (i = 0; i < classElements.length; i++) {
classElements[i].style.gridRow = "4 / span 4";
}