.slider ::-webkit-slider-thumb在javascript中需要 [英] .slider::-webkit-slider-thumb needed in javascript
问题描述
我想制作一个可以在值更改时更改点大小的滑块. 因此,值1的大小为10px,值100的大小为100px.
I want to make a slider that changes the dot size when the value changes. So value 1 will be a size of 10px and value 100 will be size 100px.
如何使用javascript更改.slider ::-webkit-slider-thumb高度?
How am a able to change the .slider::-webkit-slider-thumb height with javascript?
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
<h1>Round Range Slider</h1>
<div class="" "slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
我尝试过的=
document.getElementById("myRange").style.webkitTransform = "height: 100px";
推荐答案
好的,所以,在回答问题之前:
Okay, so, before answering the question:
::-webkit-slider-thumb
是伪元素.这些元素不是 DOM 的一部分.因此,使用JavaScript更改它们可能会有点麻烦.
::-webkit-slider-thumb
is a pseudo element. Those elements are not part of the DOM. Therefore, changing them in JavaScript can get a bit hacky.
一个正确的解决方案是用另一个元素完全替换拇指.
A proper solution would be completely replacing the thumb with another element.
现在回答这个问题:当滑块值更改时,可以将样式注入具有给定属性的<style>
元素中.
Now to answer the question: You could inject styles into an <style>
element with a given attribute when the slider value changes.
所以您将添加
<style data="test" type="text/css"></style>
到标题中,然后定位元素并像这样向其添加CSS:
to your header, then target the element and add CSS to it like that:
var style = document.querySelector('[data="test"]');
style.innerHTML = ".class { property: value; }";
This, combined with the code you provided at this link would be a solution to your problem.
演示:
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var style = document.querySelector('[data="test"]');
setData(slider.value);
slider.oninput = function() {
setData(this.value);
}
function setData(x){
output.innerHTML = x;
style.innerHTML = ".slider::-webkit-slider-thumb { width: " + x + "px !important; height: " + x + "px !important; }";
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider {
margin-top: 40px;
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
}
<style data="test" type="text/css"></style>
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
也:你说
因此,值1的大小为10px,值100的大小为100px.
So value 1 will be a size of 10px and value 100 will be size 100px.
如果您希望值1到10之类的方法等于10像素,而值10以上的所有值都是以像素为单位的实际值,则可以更改行
If you want an approach like value 1 to 10 equals 10px and everything above value 10 is the actual value in pixels, you can change the line
style.innerHTML = "...";
到
style.innerHTML = ".slider::-webkit-slider-thumb { width: " + (x < 10 ? 10 : x) + "px !important; height: " + (x < 10 ? 10 : x) + "px !important; }";
可以找到此版本的Live演示 这里
A Live demo of this version can be found HERE
这篇关于.slider ::-webkit-slider-thumb在javascript中需要的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!