html - 如何使 CSS 类的一部分动态化并向其发送值？

Question

我在我的 mvc 元素的 header 中有一些链接，这些链接具有通过链接显示图标并在其中添加 vale 的样式。例如考虑这段代码:

<span class="icon-alert-13"></span>

<a href="@Url.Action("Document","Document")" class="documents-view"><span class="icon-docs"></span>documents</a>

它是这样的:

例如，如果我将 13 更改为 18，例如 :icon-alert-18，它会在图标中显示 18。

这是风格:

.icon-alert-18:before {
 content: '\0030';

如何将 class="icon-alert-18"的数字部分设为变量，以便我可以从我的代码传递值并让图标填充我传递的值？

这也是在移动开发中。

Answer 1

假设您有一个名为 alertNumber 的变量，它包含您想要在图标中显示的数字。

您可以使用任何 DOM 函数获取您的图标:

const numbersIcon = document.getElementById("numbersIcon");

声明您始终希望元素拥有的类，例如:

const defaultNumbersIconClasses = "foo";

您可以将该变量传递给更改元素类的函数，如下所示:

function updateIconTo(number) {
    numbersIcon.className = defaultNumbersIconClasses;
    numbersIcon.classList.add("icon-alert-" + number);
}

函数内的第一行将元素的类设置为您指定的默认类。

第二个添加 icon-alert- 加上你的号码作为一个新类。

您现在可以在您喜欢的任何类型的事件上使用该函数，例如 onclick 事件:

<span onclick="updateIconTo(alertNumber)" id="numbersIcon" class="icon-alert-13"></span>

希望对您有所帮助!