javascript - 在javascript中隐藏滑块的拇指
问题描述
我想制作一个滑块的拇指(这甚至是一个好词吗?我会假设它是)隐藏一会儿,然后在 javascript 中再次显示它。基本上,这个想法是在用户点击滑块之前不显示它,以免影响他们的答案。
对于 MWE,我认为这是一个很好的。https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_rangeslider
在这一个中,通过更改:
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
进入
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
display: none;
}
我可以让滑块的拇指消失。但是您将如何在 javascript 中实现这一点。
提前致谢。
解决方案
事实证明,您不能直接在 JS 中执行此操作。但是一种简单的方法是使用两个不同的 CSS 类,并使用 JS 来制作滑块更改类。
这是部分解决方案
/* The slider itself */
.slider {
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
width: 25%; /* Full-width */
height: 10px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}
/* Mouse-over effects */
.slider:hover {
opacity: 1; /* Fully shown on mouse-over */
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
}
.slider::-moz-range-thumb {
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
}
/*An other class to make the thumb of the slider invisible*/
.slider2 {
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
width: 25%; /* Full-width */
height: 10px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}
/* Mouse-over effects */
.slider2:hover {
opacity: 1; /* Fully shown on mouse-over */
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider2::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
visibility: hidden;
}
.slider2::-moz-range-thumb {
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
}
注意visibility: hidden;
for slider2
。
然后使用js更改类,如:
document.getElementbyId("slider").className = "slider2"
推荐阅读
- javascript - 循环槽数组渲染jsx元素
- reactjs - FullCalender v5.0 不支持 React 的 viewRender
- javascript - 运行 ALTER 枚举时出现 SQL 错误将 VALUE 'A' 重命名为 'B'
- php - 显示刀片文件的问题出现错误''count():参数必须是实现可计数的数组或对象''
- postgresql - Postgres - 为表分配自定义安全
- php - Symfony 5注册表验证不起作用
- android - 为什么在颤振上使用 TextField 后会显示 READ_EXTERNAL_STORAGE
- angular - instanceof 在 Angular 库中创建时返回 false
- javascript - 如何修复错误:迁移的 MD5 校验和失败 [1] npm ERR!代码 ELIFECYCLE npm 错误!错误号 1
- python - 如何用python子进程调用用shell编写的jq?