CSS网格布局使用JavaScript更改列宽 [英] CSS grid layout changing column width with javascript

问题描述

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

I try setting up a CSS grid layout as follows

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

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

Is it possible to locate grid-template-columns in JS then re-size the columns? I came across a situation where I could find it (lost the code) but when I tried changing it, Chrome DevTools say the value is computed and cannot be changed.

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

Any help pointing me in the right direction (or other ways to do it, but use of grid is a must) is highly appreciated.

谢谢。

推荐答案

@MikeC，如果您不是相对于使用jQuery，您可以使用jQuery的 .css（）函数更改列宽，

@MikeC, if you're not opposed to using jQuery, you can change the column width using jQuery's .css() function, which

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

Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

您可以在jQuery文档中阅读有关功能此处。

You can read more on it in jQuery's documentation for the function here.

此外，为了让您可以看到它的运行效果，我整理了一个可编解码项目，您可以在运行中看到它。如果单击网格上的任意位置，它将调整大小（尽管只有一次）。这是一个原始示例。

Also, just so you can see it in action, I put together a codeply project that you can see it in action. If you click anywhere on the grid, it will resize (only once though). It's a primitive example.

这是它使用的jQuery代码。

Here's the jQuery code it uses.

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

这篇关于CSS网格布局使用JavaScript更改列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！