javascript - 基于类创建内联图像

Question

我目前正在为 Hitbox.tv 创建用户脚本/扩展； mod 的基本思想是用 Twitch.tv 上的图像替换某些单词，这我已经完成了。现在我需要帮助的是找到根据某些人的消息或名字创建徽章符号的最简单方法。例如，如果一个名为“GamingTom”的用户发送了一条消息，那么他们的名字左侧会显示一个小符号。

我已经了解了一些实现方法，但没有任何效果。我认为可能有用的两个选项是:

<li ng-repeat="message in messages" class="from_GamingTom user buffer_" compile="message.html" ng-class="{isOwner:message.isOwner, isMod:message.isMod}">

使用 document.getElementsByClassName

或:

<span class="name" ng-click="userTooltip(message.name)" style="color:#FA58AC;border-color:#FA58AC">GamingTom</span>

我是 javascript 的新手，所以非常感谢任何帮助。如果这些都没有任何意义，请说出来，我会尽量让自己更清楚。非常感谢!

编辑:

只是让你知道，无论如何我都无法编辑 HTML。我无权访问源文件，所以我能做到这一点的唯一方法是在扩展中使用某种 javascript，如果这有意义的话。此外，显示在用户旁边的图像将仅针对某些用户，比方说捐赠者，并且只会是一组图像；不是他们的化身或任何东西。我提供的代码在检查 html 后直接来自网站，我选择了这两组代码，因为它们都有用户名，所以我认为它们最容易用于此目的。我希望这次编辑能有所帮助!

Answer 1

虽然您没有提供太多可使用的代码，但我会尝试扩展您的第一行代码。看起来您正在尝试使用 Angular 来完成此操作。因此，要执行类似的操作，您只需将 img 标记添加到您的 li 例如

<li ng-repeat="message in messages" class="from_GamingTom user buffer_" compile="message.html" ng-class="{isOwner:message.isOwner, isMod:message.isMod}">
<img ng-src="{message.pic}"/>
</li>

然后只需使用 css 设置 img 和 li 的样式即可获得您想要的外观。