如何使用 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上，它需要隐藏选择元素中的向下箭头。我需要使用 JavaScript onclick 事件显示箭头。我试过document.getElementsByClassName()但没有用。

您可以在此处查看测试页面：测试页面。单击"名字"或"姓氏"以显示字段(超过上面列出的字段)，您将看到选择元素中的向下箭头是任务。

Answer 1

因此，无法直接选择伪元素，但您可以创建一组如下所示的 CSS 样式，这将使用父元素上的"可切换"类更改::before元素：

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

当您添加(或删除).show-chevron类以.elementor-select-wrapper时，它应该切换::before元素。

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

让我知道这是否有效！如果没有，我可以再看看

Answer 2

可以通过 JS 编辑 css 伪元素，如以下代码片段所示。

// Create a new style element
var styleElement = document.createElement("style")
document.head.appendChild(styleElement)
// Get the CSSStyleSheet object of the newly created style element
var styleSheet = styleElement.sheet
// Add a new rule targeting the :after pseudo-element
styleSheet.insertRule(".your-class-name:after { display: none; }", 0)