更新网格行元素

Question

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

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

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

Answer 1

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

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";
}