html – 实时聊天(Node.js)需要自定义字体辅助

2019年7月28日 98次阅读

HTML / CSS仍然相对较新,目前正在使用Node.js和MongoDB为我的网站开发实时聊天功能.我已经能够让聊天工作,但一直坚持找出如何自定义聊天的特定方面.我想在聊天框(看到所有消息的区域)中更改用户名的字体粗细,以使用户名与框中其他文本相比更加突出.我很困惑如何在CSS中这样做.我已经突出显示(黄色)调用’Username’的行,所以我想这是我需要自定义的’类’,但如果有意义的话,它会与文本联系起来……？

谢谢你的帮助！

《html – 实时聊天(Node.js)需要自定义字体辅助》

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选择器：

 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/

点赞