Question

我有一个包含用户生成内容的段落。该段落是一个列表，其中的单词以逗号分隔。例如，＃34;狗，猫，仓鼠，海龟＆＃34;。我希望将此列表分开，以便为每个单词分配自己的属性。

如上例所示，而不是具有共享边框和颜色的列表。我希望他们有自己的＆＃34;非连接＆＃34;边界与它们之间的间距。这可能吗？

Answer 1

这是一种方法（虽然下次尝试自己取得一些进展）：

如果这是你的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;}

请注意，您当然可以将该元素作为参数传递给函数。如果你有任何问题请随意..祝你好运！

Answer 2

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

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

然后关于你css

.red{color: red;}

如果你想边框只是添加另一个类 .border-red{border: 1px red solid;}

如果内容是动态创建的，那么它会更复杂但实际上可能，我希望这有效！

Answer 3

是使用Indexof分隔所有单词并提供单独的css

分隔段落列表并为每个单词提供单独的CSS

3 个答案: