如何使用冒号语法在 javascript 中获取 class，使动态 class 像顺风 css

Question

我想为 hover、焦点、检查等制作动态 class。 但我无法使用冒号（:）获得那些 class 格式（悬停：bg-sky-700）。它在控制台中显示错误。 请提供一个想法，使动态 class 像顺风一样。 谢谢你。

<div class="single-bg bg_amber_5 hover:bg_green"></div>

在此处输入图像描述

Answer 1

如果您的 class 名称包含保留字符（ . 、 : 、 #等），您需要使用CSS.escape对其进行转义以避免歧义：

 // be careful you don't want to escape the leading "." since it meant to be indicating a class selector const element = document.querySelector(`.${CSS.escape('hover:bg_green')}`); console.log(element);

 <div class="single-bg bg_amber_5 hover:bg_green"></div>