javascript - 如何更改 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

标签： javascriptjquerycss

Answer 1

如果您将此行从使用text转义 HTML 实体的方法更改为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 {
    /* ... */
}