javascript - 仅使用 "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 注入(inject)另一个样式表:

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 的标准)