如何使用 vanilla Javascript 获取标签 HTML 标签内的 ::before？

Question

我正在使用 semantic-ui-react for my UI. I didn't like the color of the Radio (toggle) 所以我使用 CSS:

自定义了它

.radio-toggle .ui.toggle.checkbox input:checked ~ label:before,
.radio-toggle .ui.toggle.checkbox input:focus:checked ~ label:before {
    background: saddlebrown !important;
}

这可行，但我需要使用 Javascript select，因为我需要为背景（-颜色）传递一个动态值。我试过这样做：

const label = document.querySelector('label');
console.log(label);

我得到了这个：

有没有一种方法可以像我在 CSS 中所做的那样使用 vanillaJS select label 标签内的 ::before 这样我就可以动态设置样式（动态设置是因为我有一项功能可以让我的用户更改我网站的主题颜色）？

我实际上在使用 ReactJS 并且我知道在您已经在使用 React 的情况下使用 vanillaJS 不是一个好习惯。所以我也尝试了这个：

<Radio toggle style={{ background: 'red' }} />

但结果很丑陋：

请帮忙。如果有针对这个的 React 解决方案，那就更好了。但如果它是 vanillaJS，那就没问题了。提前致谢！

Answer 1

顾名思义，无法选择伪元素（伪元素）。您能做的最好的事情就是简单地切换 class 以使用 css.

对其进行标记和设置样式

如何使用 vanilla Javascript 获取标签 HTML 标签内的 ::before？

How to get the ::before inside the label HTML tag using vanilla Javascript?

javascript

css

css-selectors

reactjs

semantic-ui-react