使用JavaScript更改文本内容后的伪元素：：

brtdzjyr 于 2022-12-28 发布在 Java

关注(0)|答案(2)|浏览(168)

有什么方法可以使用JS动态地更改：：after伪元素的文本内容吗？我正在尝试创建一个表单作为练习（刚刚开始学习Web开发），但我无法使用JS更改密码字段下的文本。
我希望它告诉用户密码是否太短，或者确认密码字段有不同的值。
以下是github上的所有文件：
https://github.com/mihaib1/sign-up-form
如果需要更多的信息，我会尽快回复。谢谢你的帮助！
尝试使用在根目录中声明的CSS变量，但无法使该变量的值显示在屏幕上，我不知道为什么。此外，当使用CSS变量时，只有当我只使用一个单词时，它们才会改变。当尝试将变量设置为由多个单词组成的字符串时，使用setProperty不会改变。

JavaScript

来源：https://stackoverflow.com/questions/74933542/change-pseudo-element-after-text-content-using-javascript

2条答案

按热度按时间

thtygnil1#

你可以通过在css中使用attr()函数来实现这一点，并使用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>

赞(0）回复(0）举报 2022-12-28

vc9ivgsu2#

通过使用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>

赞(0）回复(0）举报 2022-12-28

我来回答

使用JavaScript更改文本内容后的伪元素：：

2条答案

相关问题

热门标签

最新问答