如何用JavaScript将评论中的用户名部分设置为指定颜色？

当然可以实现，你当前的问题是用document.createTextNode()把日期、名字、评论拼成了一个纯文本节点，纯文本没法单独给某部分设置样式。你需要用<span>标签包裹名字部分，再给这个span应用颜色选择器的取值。

修改后的完整函数代码 #

function newComment() {
    // 先获取所有DOM元素
    const commentsection = document.getElementById("commentsection");
    const nameInput = document.getElementById("name");
    const colorPicker = document.getElementById("color");
    const commentInput = document.getElementById("comment");
    const checkbox = document.getElementById("checkboxid");

    // 先做验证，避免白创建元素
    if (!checkbox.checked) {
        alert("You have to accept the TOS!");
        return;
    }
    if (nameInput.value === '') {
        alert("Enter a name!");
        nameInput.style.borderColor = 'red';
        return;
    }
    if (commentInput.value === '') {
        alert("Write a comment!");
        commentInput.style.borderColor = 'red';
        return;
    }

    // 生成日期字符串
    const today = new Date();
    const dd = String(today.getDate()).padStart(2, '0');
    const mm = String(today.getMonth() + 1).padStart(2, '0');
    const yyyy = today.getFullYear();
    const hour = String(today.getHours()).padStart(2, '0');
    const min = String(today.getMinutes()).padStart(2, '0');
    const sec = String(today.getSeconds()).padStart(2, '0');
    const dateStr = `${yyyy}/${mm}/${dd}-${hour}:${min}:${sec}`;

    // 创建评论容器li
    const li = document.createElement('li');
    // 创建blockquote和p标签，匹配你想要的格式
    const blockquote = document.createElement('blockquote');
    const p = document.createElement('p');

    // 添加日期文本
    p.appendChild(document.createTextNode(`${dateStr} -- `));

    // 创建包裹名字的span，设置颜色
    const nameSpan = document.createElement('span');
    nameSpan.style.color = colorPicker.value;
    nameSpan.textContent = nameInput.value;
    p.appendChild(nameSpan);

    // 添加评论文本
    p.appendChild(document.createTextNode(`:    ${commentInput.value}`));

    // 组装元素并添加到页面
    blockquote.appendChild(p);
    li.appendChild(blockquote);
    commentsection.appendChild(li);

    // 重置表单样式和输入框
    nameInput.style.borderColor = 'black';
    commentInput.style.borderColor = 'black';
    commentInput.value = "";
}

关键修改点说明 #

1. 验证逻辑前置：先检查复选框和输入框是否为空，避免验证失败时白创建一堆DOM元素。
2. 用span包裹名字：创建<span>元素，通过style.color设置为颜色选择器的value，把名字文本放入span，这样就能单独给名字上色。
3. 匹配目标格式：按照你给出的评论格式，创建了<blockquote>和<p>标签，而不是直接把文本放在li里，结构更符合需求。
4. 分部分拼接内容：把日期、名字span、评论分成三个部分添加到p标签里，而不是拼成一个大文本节点。

这样修改后，提交的评论里只有名字部分会显示你选择的颜色，其他内容保持默认样式。

内容的提问来源于stack exchange，提问作者Beny