如何优化动态生成多列文本样式

How optimal dynamically to generate multi-column text styles

本文关键字：文本 样式 动态 何优化 优化      更新时间：2024-05-23

我有一个由查询字符串指定的列数。

function getParameterByName(name) {
    name = name.replace(/['[]/, "'''[").replace(/[']]/, "''']");
    var regex = new RegExp("[''?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/'+/g, " "));
}
var columns=getParameterByName('col');

现在我需要动态生成样式。我试着这样做：

document.querySelector('.wrapper_sport').style.mozColumnCount=columns;
document.querySelector('.wrapper_sport').style.webkitColumnCount=columns;
document.querySelector('.wrapper_sport').style.ColumnCount=columns;

对我来说，这是糟糕的代码。我还想定义其他风格。。。。列间距、列规则其他。建议生成样式的最佳方式。感谢

您可以在CSS文件中为类（例如"columns"）编写样式，并在需要时在JS中添加此类。

.wrapper_sport{
same style
}
.wrapper_sport.columns{
-moz-column-count: 3;
-moz-column-gap: 50px;
-webkit-column-count: 3;
-webkit-column-gap: 50px;
column-count: 3;
column-gap: 50px;
}
相关文章：