使用 JavaScript 更改伪元素::文本内容之后

Question

有什么方法可以使用JS动态更改::after伪元素的文本内容吗？ 我正在尝试创建一个表单作为练习（刚开始学习 web 开发），我无法使用 JS 更改密码字段下的文本。

我想让它告诉用户密码是否太短，或者确认密码字段有不同的值。

以下是 github 上的所有文件：

https://github.com/mihaib1/sign-up-form

如果需要更多信息，我会尽快回复。 谢谢你的帮助！

尝试使用在根目录中声明的 CSS 变量，但无法使该变量的值出现在屏幕上，我不知道为什么。 此外，当使用 CSS 个变量时，如果我只使用一个词，它们只会改变。 当尝试将变量设置为由多个单词组成的字符串时，使用 setProperty 不会更改。

Answer 1

您可以通过在 css 中使用attr() function 并使用setAttribute更改 dom 节点上的属性值来实现此目的：

 document.onclick = function() { document.getElementById("test").setAttribute("data-after", "thank you!") }

 #test::after{ content: attr(data-after); letter-spacing: 0; color:red; }

 <div id=test data-after="click me"></div>

Answer 2

通过JS在你的HTML元素中添加自己的属性，在CSS中调用，解决方法如下

JS

function test() {document.querySelector("#msg").setAttribute("data-text", "My new message")}

HTML & CSS

<style>
#msg {position: relative;}
#msg::after {content: attr(data-text);}
</style>

<span id="msg"></span>
<button onclick='test()'>click</button>