Question

HTML / CSS仍然相对较新，目前正在使用Node.js和MongoDB为我的网站开发实时聊天功能。我已经能够让聊天工作，但一直坚持找出如何自定义聊天的特定方面。我想在聊天框（看到所有消息的区域）中更改用户名的字体权重，以使用户名与框中其他文本相比更加突出。我很困惑如何在CSS中这样做。我突出显示了（用黄色）＆＃39;用户名＆＃39;被称为所以我认为这是＆＃39;班级＆＃39;我需要自定义，但如果有意义的话，它会与文本联系起来......？

感谢您的帮助！

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>

Answer 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/

实时聊天（Node.js）需要自定义字体辅助

1 个答案: