点击事件触发伪类样式变更：如何隐藏jspsych滑块的滑块柄？

你当前的代码会隐藏整个滑块，要只隐藏滑块柄，得注意：CSS伪元素（比如::-webkit-slider-thumb）不属于DOM节点，无法通过JS直接修改样式，所以得换个思路——给滑块元素加自定义类，再通过CSS控制伪元素的显示。

步骤1：修改JS点击事件代码 #

把原来直接隐藏滑块的逻辑，改成给滑块添加一个自定义类（比如hide-thumb）：

function(){
  document.querySelector('.jspsych-slider').addEventListener('click', function(e){
    e.target.classList.add('hide-thumb');
  });
}

步骤2：新增CSS样式控制伪元素 #

在你的CSS中添加以下代码，当滑块拥有hide-thumb类时，隐藏对应的滑块柄：

/* 兼容WebKit内核浏览器（Chrome、Safari等） */
.jspsych-slider.hide-thumb::-webkit-slider-thumb {
  visibility: hidden;
}
/* 兼容Firefox */
.jspsych-slider.hide-thumb::-moz-range-thumb {
  visibility: hidden;
}

这样点击滑块后，只会隐藏滑块柄，滑块的轨道部分会保留。

内容的提问来源于stack exchange，提问作者Huang Ham