如何使用 JavaScript 显示隐藏的伪元素

Question

我正在使用 CSS 来隐藏表单元素：

#main_form #form-field-email, #form-field-realtor_select { display: none;}
#main_form .elementor-select-wrapper::before { display: none; }

然后 JavaScript 向他们展示：

document.getElementById("form-field-first_name").onclick = function(){
document.getElementById('form-field-email').style.display = 'block';
document.getElementById('form-field-realtor_select').style.display = 'block';

问题出在伪元素 .elementor-select-wrapper::before 上，它需要隐藏 select 元素中的向下箭头。我需要使用 JavaScript onclick 事件显示箭头。我试过 document.getElementsByClassName() 但没有用。

您可以在此处查看测试页面：Test Page。单击 First Name 或 Last Name 以显示字段（比上面列出的更多），您会看到向下箭头是来自 select 元素的任务。

Answer 1

所以，不可能直接 select 一个伪元素，但是你可以像下面这样创建一组 CSS 样式，这将改变 ::before 元素使用“可切换”class 在父级上：

#main_form .elementor-select-wrapper::before {
    display: none;
}

#main_form .elementor-select-wrapper.show-chevron::before {
    display: block;
}

当您将 .show-chevron class 添加（或删除）到 .elementor-select-wrapper 时，它应该切换 ::before 元素。

document.getElementsByClassName('elementor-select-wrapper')[0].classList.add('show-chevron')

让我知道这是否可行！没有的话我再看看

如何使用 JavaScript 显示隐藏的伪元素

How to show hidden pseudo-element with JavaScript

javascript

css

dom

pseudo-element

cssom