Javascript 如何修改CSS，以便在DOM中以特定颜色显示元素？

我正试图建立一个网站使用引导和JavaScript。我试图学习如何实现一个功能，当用户登录到我的web应用程序时，通过在他们的个人资料名称旁边显示一个绿色气泡来显示用户正在积极参与网站。我已经创建了这个项目，并包含了一些代码，试图将活动用户气泡显示为绿色，而不是表示用户脱机的红色气泡

请看下面的图片，它显示了我正在努力实现的目标

为了清晰起见，我还包括了一个代码片段

任何指导都将不胜感激

html

 <div id="user-avtive"><span><img  src="/assets/images/signin/User-online.png"></span></div>

---

使用伪元素

：：之后，：：之前，而不是图像。
你可以试试这样的


.user{
字体大小：15px；
字体大小：粗体；
文本转换：大写；
位置：相对位置；
显示：内联块；
}
.用户：：之后{
内容：“；
高度：8px；
宽度：8px；
边界半径：50px；
背景色：#000000；
排名：0；
右：-10px；
保证金：自动；
显示：内联块；
位置：绝对位置；
}
.user.active:：after{
背景色：#00ff00；
}
.user.username{
颜色：#0000ff；
}

嗨，用户
使用伪元素
：：之后，：：之前，而不是图像。
你可以试试这样的


.user{
字体大小：15px；
字体大小：粗体；
文本转换：大写；
位置：相对位置；
显示：内联块；
}
.用户：：之后{
内容：“；
高度：8px；
宽度：8px；
边界半径：50px；
背景色：#000000；
排名：0；
右：-10px；
保证金：自动；
显示：内联块；
位置：绝对位置；
}
.user.active:：after{
背景色：#00ff00；
}
.user.username{
颜色：#0000ff；
}

嗨，用户
是否存在特定问题？你已经展示了一张图片，以及一些可能产生这个点的HTML…你能将你的完整代码，包括CSS、HTML和JS粘贴到CodePen.io并共享链接吗？我会帮你解决这个问题的。@lopezdp先生，我的项目是emebr JS，我上周问过，有人不知道如何制作ir emebr JS吗，但是有人帮我用html和js修复它，我可以把它转换成余烬，这是我之前的问题，有没有具体的问题？你已经展示了一张图片，以及一些可能产生这个点的HTML…你能将你的完整代码，包括CSS、HTML和JS粘贴到CodePen.io并共享链接吗？我会帮你解决这个问题的。@lopezdp先生，我的项目是emebr JS，我上周问过，有人不知道如何制作ir emebr JS吗，但是有人帮我用html和js来修复它，我可以把它转换成余烬，这是我前面的问题的好答案，但我会用
边界半径：50%
。使用50%确保始终渲染圆，而不管其宽度和高度是多少。是的，即使可以使用50%，在使用百分比之前我也遇到了问题。所以我在这里使用了px。答案很好，但我会使用
边界半径：50%
。使用50%确保始终渲染圆，而不管其宽度和高度是多少。是的，即使可以使用50%，在使用百分比之前我也遇到了问题。所以我在这里用了px。