分开一个段落列表，给每个单词单独的CSS

Separate a paragraph list and give each word individual CSS

本文关键字：单词单 CSS 段落 一个 列表      更新时间：2023-09-26

我有一个包含用户生成内容的段落。段落是一个用逗号分隔的单词列表。例如"狗、猫、仓鼠、乌龟"。我希望这个列表是分开的，这样每个单词都可以分配自己的属性。

图像示例

正如我上面的例子，而不是列表有一个共享的边界和颜色。我希望他们有自己的"非连接"边界，它们之间有间隔。这可能吗？

这里有一种方法（尽管下次尝试自己取得一些进展）：

演示

如果这是你的html:

<p id="example">dog, cat, hamster, turtle</p>

你的js:

function seperateList() {
    var el =  document.getElementById("example");
    var array = el.innerHTML.split(",");
    
    el.innerHTML = "";
    for (var i =0; i<array.length;i++) {
        var _newa = document.createElement("span");
        var _a = array[i].trim();
            _newa.innerHTML= _a;
            el.appendChild(_newa);
    }
}
seperateList();

css：

#example span { padding:2px 5px; background:#e3e3e3; margin:0 5px; border-radius:6px;}
  • 请注意，您当然可以将元素作为参数传递到函数中。。如果你有任何问题，请随意。。祝你好运

是的Henrik你可以为特定的单词添加特殊的css，使用span标签，比如：

<span class="red">Color Red</span>

然后在你的css

.red{color: red;}

如果你想要边界，只需添加另一个类，比如.border-red{border: 1px red solid;}

如果内容是按常规创建的，则它将更加复杂但实际上是可能的，我希望这能奏效！

yes使用Indexof分离所有单词并提供单独的css

相关文章：