如何更改JavaScript中发出的文本的大小和/或权重？

Question

我正在构建一个简单的聊天应用程序进行练习，并希望对发出的内容进行样式设置。具体来说，我希望时间戳的大小较小（或其他阴影），而用户名则为粗体。

我尝试过user.bold()，但是发出<b>user</b>。

我已经尝试过CSS内联样式$("user").css({"font-style": "bold"})和$("#initials").css({"font-style": "bold"})，但是都没有做。

我已经尝试过getElementByID('user')。娜达（不要问我写了些什么，因为我已经插了几个小时了，不记得了...）

当我调整CSS文件时，它只会影响输入字段，而不会影响发出的文本。

这是我的代码（编辑/注意：我包括了更多的客户端.js文件）：

   

$('form').submit(function () {
    var user = $('#initials').val();
    var text = $('#message').val();
    var dt = new Date();
    var ampm = (Date <12 || Date === 24) ? "AM" : "PM";
    var time = "(" + (dt.getHours() % 12 || 12) + ":" + ("0" + dt.getMinutes()).slice(-2) + ":" + ("0" + dt.getSeconds()).slice(-2) + ampm + ") ";
    socket.emit('message', time + user + ': ' + text);
    $('#message').val('');
    return false;
});

socket.on('message', function (msg) {
  $('<li>').text(msg).appendTo('#history');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id="initials" maxlength="2">
  <input id="message">
  <button>Send</button>
</form>

编辑-这是我的CSS文件的相关部分：

body {
    background-color:white;
    color: #303030;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin: 20px;
    font-size: 15px;
}
input {
    border-radius: 2px;
    border: none;
    padding: 5px;
    font-size: 15px;
}

#initials {
    width: 40px;
    text-transform: uppercase;
}

这是我的HTML：

<main>
    <ol id="history">
    </ol>

    <form>
        <input id="initials" maxlength="2">
        <input id="message">
        <button>Send</button>
    </form>
</main>

这就是我看到的：

期待看到您可能拥有的解决方案！到目前为止，我建立的90％来自这个论坛和社区。 XO

Answer 1

如果您将此行从使用转义HTML实体的text方法更改为html，它将解决您的问题。

$('<li>').html(msg).appendTo('#history');

随后，您将可以在邮件中包含HTML：

$('form').submit(function () {
    var user = $('#initials').val();
    var text = $('#message').val();
    var dt = new Date();
    var ampm = (Date <12 || Date === 24) ? "AM" : "PM";
    var time = "(" + (dt.getHours() % 12 || 12) + ":" + ("0" + dt.getMinutes()).slice(-2) + ":" + ("0" + dt.getSeconds()).slice(-2) + ampm + ") ";
    socket.emit('message', '<span class="timestamp">' + time + '</span> <span class="user">' + user + '</span>: <span class="message">' + text + '</span>');
    $('#message').val('');
    return false;
});

socket.on('message', function (msg) {
    $('<li>').html(msg).appendTo('#history');
});

然后您可以编写CSS来针对这些类：

.timestamp {
    font-size: 10px;
}
.user {
    font-weight: bold;
}
.message {
    /* ... */
}