Question

我正在寻找与grid-template-columns和grid-template-rows对应的javascript dom。我在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>

寻找等效的grid-template-columns和grid-template-rows javascript

1 个答案: