CSS网格布局用javascript改变列宽答案

【问题标题】：CSS grid layout changing column width with javascriptCSS网格布局用javascript改变列宽
【发布时间】：2018-02-19 05:06:41
【问题描述】：

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

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

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

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

谢谢。

【问题讨论】：

标签： javascript css grid-layout css-grid

【解决方案1】：

@MikeC，如果你不反对使用 jQuery，你可以使用 jQuery 的 .css() 函数来改变列宽，

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

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

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

这是它使用的 jQuery 代码。

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

【讨论】：

感谢您的回答。 jQ 不允许这样做。可以用纯javascript回答吗？谢谢！
我可以使用 document.getElementsByClassName('wrapper')[0].style.gridTemplateColumns 来访问一些东西，但它返回一个空字符串......
好的，明白了！看来我可以直接设置上面的变量，它会马上改变宽度！感谢您的帮助！
这似乎在 FireFox 中有效，但在 Chrome 中还没有。 Chrome 73.0.3683.75 (Official Build) (64-bit) Firefox 65.0 (64-bit) 你可以在这里查看：codepen.io/bileschi/pen/ZPRPqr

【解决方案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';
    }

}

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

【讨论】：