CSS网格布局更改列宽使用javascript
问题描述:
我尝试建立一个CSS网格布局如下CSS网格布局更改列宽使用javascript
.wrapper {
width: 800px;
display: grid;
grid-template-columns: repeat(3, 200px);
grid-template-rows: repeat(5, 200px);
}
是否有可能找到网格模板列在JS然后重新大小的列?我遇到了一种我可以找到它的情况(丢失了代码),但是当我尝试改变它时,Chrome DevTools说这个值是计算出来的,不能改变。
任何帮助指向我在正确的方向(或其他方式来做到这一点,但使用电网是必须的),我非常感激。
谢谢。
答
@MikeC,如果你不反对使用jQuery,您可以使用jQuery的.css()
功能,
得到一个计算样式属性的值的第一个元素 的改变列宽匹配元素的集合或为每个匹配元素设置 的一个或多个CSS属性。
您可以阅读jQuery的文档中有更于它的功能here。
此外,只要你能看到它的行动,我放在一起codeply project,你可以看到它的行动。如果你点击网格上的任何地方,它将调整大小(只有一次)。这是一个原始的例子。
下面是它使用的jQuery代码。
$("#grid").one("click", function() {
$(this).css("grid-template-columns", "repeat(2, 400px)");
});
谢谢你的回答。 jQ不允许这样做。纯JavaScript的答案可能吗?谢谢! – MikeC
我可以使用document.getElementsByClassName('wrapper')[0] .style.gridTemplateColumns 来访问的东西,但它返回一个空字符串... – MikeC
行了!似乎我可以直接设置上面的变量,它会马上改变宽度!感谢您的协助! – MikeC