更新网格-行元素

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