需要实时聊天 (Node.js) 自定义字体协助答案

【问题标题】：Live Chat (Node.js) Custom Font Assistance Needed需要实时聊天 (Node.js) 自定义字体协助
【发布时间】：2016-10-19 17:47:06
【问题描述】：

对于 HTML/CSS 来说仍然相对较新，目前正在为我的网站使用 Node.js 和 MongoDB 开发实时聊天功能。我已经能够使聊天正常工作，但一直在弄清楚如何自定义此聊天的特定方面。我想更改聊天框中（可以看到所有消息的区域）中用户名的字体粗细，以使用户名与框中的其余文本相比更加突出。我对如何在 CSS 中这样做感到困惑。我已经突出显示（黄色）调用“用户名”的行，所以我想这是我需要自定义的“类”，但如果有意义的话，它会与文本绑定......？

感谢您的帮助！

Browser Inspect Element

What my code and chat currently look like (see line 59 for highlighted portion)

 <!DOCTYPE html>
<html>
    <head>
        <title>Chat</title>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <div class="chat">
            <input type="text" class="chat-name" placeholder="Chat">
            <div class="info-rect">Info</div>
            <div class="chat-messages"></div>
            <textarea placeholder="Join the conversation..."></textarea>
            <div class="chat-status">Status: <span>Idle</span></div>
        </div>

        <script src="http://127.0.0.1:8080/socket.io/socket.io.js"></script>

        <script>
            (function() {
                var getNode = function(s) {
                    return document.querySelector(s);
                },

                // Get required nodes
                status = getNode('.chat-status span'),
                messages = getNode('.chat-messages'), 
                textarea = getNode('.chat textarea'),
                chatName = getNode('.chat-name'),

                statusDefault = status.textContent,    

                setStatus = function(s){
                    status.textContent = s;

                    if(s !== statusDefault){
                        var delay = setTimeout(function(){
                            setStatus(statusDefault);
                            clearInterval(delay);
                        }, 3000);
                    }
                };

                //try connection
                try{
                   var socket = io.connect('http://127.0.0.1:8080');
                } catch(e){
                    //Set status to warn user
                }

                if(socket !== undefined){

                    //Listen for output
                    socket.on('output', function(data){
                        if(data.length){
                            //Loop through results
                            for(var x = 0; x < data.length; x = x + 1){
                                var message = document.createElement('div');
                                message.setAttribute('class', 'chat-message');
                                message.textContent = data[x].name + ': ' + data[x].message;

                                //Append
                                messages.appendChild(message);
                                messages.insertBefore(message, messages.firstChild);
                            }
                        }
                    });

                    //Listen for a status
                    socket.on('status', function(data){
                        setStatus((typeof data === 'object') ? data.message : data);

                        if(data.clear === true){
                            textarea.value = '';
                        }
                    });

                    //Listen for keydown
                    textarea.addEventListener('keydown', function(event){
                        var self = this,
                            name = chatName.value;

                        if(event.which === 13 && event.shiftKey === false){
                            socket.emit('input', {
                                name: name,
                                message: self.value
                            });
                        }
                    });
                }

            })();
        </script>
    </body>
</html>

【问题讨论】：

最好从浏览器中检查并找到 css 选择器。浏览器的开发工具会告诉你哪个 css 文件和选择器会影响用户名类，你可以从那里修改字体
好主意，但是看起来用户名和文本元素都使用同一个类“聊天消息”，所以改变这两者都会改变。我已在我的原始帖子中添加了此屏幕截图
你可以使用 .chat-message:first-of-type 伪选择器或 :first-child
哦...我明白你的意思了。您需要将名称文本包装在 div 中，并将类和样式添加到其中

标签： html css fonts web

【解决方案1】：

在名称中添加 css 选择器：

 var message = document.createElement('div');
    message.setAttribute('class', 'chat-message');
    message.textContent = ': ' + data[x].message;
 var name=document.createElement('span');
    name.setAttribute('class', 'userName');
    name.textContent = data[x].name;

    message.insertBefore(name, message.firstChild);

那么对于css：

.userName{
   font-weight: 700;
}

这里有一个小提琴供你查看结果：https://jsfiddle.net/p4yfxLd0/

【讨论】：

我们确实在缩小这个问题的范围，虽然当我用你写的那一行替换 html 行时，它只是说明了你在引号内输入的内容，我添加了另一个图片到要显示的原始帖子（我可能需要 1 分钟才能完成）
用更新代码替换 var 消息设置。将内容保留在 //append 行之后。这将创建一个 span 的 DOM 元素并将其插入到聊天消息 div 中，然后将整个内容附加到消息正文中
成功了！非常感谢，看来我有一些关于 DOM 的阅读要做。非常感谢您的帮助
很高兴为您提供帮助！请选择这个作为选择的答案，以便其他有类似问题的人可以参考。