Question

我尝试按如下方式设置CSS网格布局

.wrapper {
  width: 800px;
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(5, 200px);
}

是否可以在JS中找到grid-template-columns然后重新调整列的大小？我遇到了一个我可以找到它的情况（丢失了代码）但是当我尝试更改它时，Chrome DevTools说这个值是计算出来的，无法更改。

我非常感谢任何帮助我指向正确方向（或其他方式，但必须使用网格）的帮助。

感谢。

Answer 1

@MikeC，如果您不反对使用jQuery，可以使用jQuery＆＃39; .css()函数更改列宽，

获取第一个元素的计算样式属性的值匹配元素的集合或设置一个或多个CSS属性每个匹配的元素。

您可以在jQuery的函数here的文档中阅读更多内容。

另外，为了让您可以看到它的实际效果，我将codeply project放在一起，您可以看到它的实际效果。如果单击网格上的任何位置，它将调整大小（仅一次）。这是一个原始的例子。

这是它使用的jQuery代码。

$( "#grid" ).one( "click", function() {
  $( this ).css( "grid-template-columns", "repeat(2, 400px)" );
});

Answer 2

@MikeC您没有告诉任何人您是如何工作的。假设您有一个调用ToolExpandToggle（）的按钮或某个事件，并假定您的网格CSS定义的类名称为“画布”，那么您可以执行类似的操作。在CSS中，我有：

@media only screen and (min-width: 768px)   {
.canvas {
    grid-gap: .0em;
    grid-template-columns: 50px auto;      /* the values are the toolbar, content */
    grid-template-rows: 50px auto 25px;     /* The values are o365Nav (O365 stardard), content, statusbar. Note: o365Nav heigth is the padding value used by the modal menu. */
    grid-template-areas:
    "o365Nav  o365Nav"
    "tool content"
    "statusbar  statusbar";
}

}

在HTML中，我有一个按钮。注意，我将宽度定义为50个与CSS匹配的数据项。无论如何，这些值将在使用时替换CSS。

    <div class="tool" id="pl-tool" data-collasped="50"; data-expanded="200";>
    <div class="spacer"></div>
    <button class="tool-ms-button"><span class="ms-Icon ms-Icon--GlobalNavButton tool-ms-icon" aria-hidden="true" onclick="toolExpandToggle('pl-tool')"></span></button>
    <!-- now the tool bar buttons -->
    <div><button class="tool-button">item-a</button></div>
    <div><button class="tool-button">item-a</button></div>
</div>

然后我有一个javascript函数：

function toolExpandToggle(target) {
    let id = document.getElementById(target);
    let c = id.dataset.collasped;
    let e = id.dataset.expanded;

    let w = document.getElementsByClassName('tool')[0].offsetWidth;
    if(w < e) {
       document.getElementsByClassName('canvas')[0].style.gridTemplateColumns = e + 'px auto';
    }
    else {
        document.getElementsByClassName('canvas')[0].style.gridTemplateColumns = c + 'px auto';
    }

}

就我而言，我只有两列。单击按钮时，我会调用toggle方法并将其更改为数据值。我希望这能使其他人走得更远。

CSS网格布局使用javascript更改列宽

2 个答案: