仅使用 "for" 属性作为选择器使用 JS 修改表单标签文本

Question

我有权访问修改标签文本所需的表单。我只能将JS添加到页面中，否则我只会更改HTML，甚至用CSS替换文本。

更糟糕的是，标签除了"for"属性之外没有ID或NAME。

<label for='camper1Grade' class="control-label required">Grade entering, Fall 2020</label>

如果我可以编辑CSS，我会这样做：

<style>
label[for=camper1Grade]:before {content: "Grade completing, Spring 2020";}
label[for=camper1Grade] { font-size: 0px;}
label[for=camper1Grade]:after { content: "*";color: red;}
</style>

但就像我提到的，我不能直接添加 CSS。

我是一个相当不错的CSS程序员，但对JS知之甚少。 我确信有一个解决方案，我只是找不到如何做到这一点的好解释。 提前感谢任何有想法的人。

Answer 1

几乎所有你可以用CSS选择的元素，你也可以用Javascript和querySelector选择。不幸的是，::before和::after伪元素不在其中。但是，你总是可以使用Javascript注入另一个样式表：

document.body.appendChild(document.createElement('style')).textContent = `
label[for=camper1Grade]::before { content: "Grade completing, Spring 2020"; }
label[for=camper1Grade] { font-size: 0px; }
label[for=camper1Grade]::after { content: "*"; color: red;}
`;

(注意两个冒号，这是 CSS3 的标准(