javascript - Javascript 来设置 CSS 属性 grid-template-columns 和 grid-template-rows

Question

我正在寻找javascript dom的等价grid-template-columns物。grid-template-rows我在 html 和 css 中做了一个简单的网格布局：

<div class="box">
    <div id="box1"><a href="#">box1</a></div>
    <div id="box2"><a href="#">box2</a></div>
    <div id="box3"><a href="#">box3</a></div>
    <div id="box4"><a href="#">box4</a></div>
</div>

.box {
    display: grid;  
    grid-template-columns: 33% auto;
    grid-template-rows: 350px 588px;
}

我想在 javascript 中编辑样式grid-template-columns，grid-template-rows但我发现 javascript dom 不支持此属性。有没有其他方法可以编辑框以便更改它们的大小？

感谢您的帮助。

Answer 1

您可以使用.style.gridTemplateColumns更改列和.style.gridTemplateRows行：

let a = true
setInterval(() => {
  let box = document.getElementById('box')
  box.style.gridTemplateColumns = a ? "20% auto" : "30% auto"
  box.style.gridTemplateRows = a ? "50px 50px" : "150px 188px"
  a = !a
}, 500)

.box {
  display: grid;
  grid-template-columns: 33% auto;
  grid-template-rows: 150px 188px;
}

<div id="box" class="box">
  <div id="box1"><a href="#">box1</a></div>
  <div id="box2"><a href="#">box2</a></div>
  <div id="box3"><a href="#">box3</a></div>
  <div id="box4"><a href="#">box4</a></div>
</div>