如何解决Javascript 使用变量更改 webkit 样式
总结
我正在处理一个 input[type=range],它本质上看起来像 Chrome 的默认值,但在点击之前拇指是绿色的。这就是最终目标。通过现在深埋在我的浏览器历史记录中的几个答案(因此对他们缺乏信任),我能够让它主要按照我想要的方式工作。
问题
onLoad 代码按照我希望的方式工作,除了一个主要问题:它影响所有元素,而不是个人。我根本不知道如何得到这条线:
s.textContent = `.slider::-webkit-slider-thumb { background-color: ${thumb_color} !important; } .slider:-moz-range-thumb { ${thumb_color} !important; }`;
以与此行相同的方式设置:
this.style.background = 'linear-gradient(to right,#006CBA 0%,#006CBA '+100*(this.value-1)/4 +'%,#efefef ' + 100*(this.value-1)/4 + '%,#efefef 100%)';
这是我的“工作”代码中的这两行:
let s = document.createElement("style");
document.head.appendChild(s);
var range_els = document.querySelectorAll('input[type=range]');
for(let i = 0;i < range_els.length; i++) {
range_els[i].addEventListener("input",() => {
const slider_value = range_els[i].value;
let thumb_color;
if (slider_value == 0) {
thumb_color = "#9CCF47";
}
else {
thumb_color = "#006CBA";
}
//effects the style,not the individual style. :|
s.textContent = `.slider::-webkit-slider-thumb { background-color: ${thumb_color} !important; } .slider:-moz-range-thumb { ${thumb_color} !important; }`;
});
range_els[i].oninput = function() {
this.style.background = 'linear-gradient(to right,#efefef 100%)';
};
}
<style>
.slider {
-webkit-appearance: none;
height: 8px;
border-radius: 4px;
background-color: #efefef;
border: 1px solid #b2b2b2;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #9CCF47;
cursor: pointer;
}
</style>
<body>
<input type="range" min="1" max="5" value="0" class="slider" name="rangeInput">
</body>
是的,我知道这是一个小于最小值的值。我正在利用它基本上将其更改为一项要求(认为而不是调查的 5 个单选按钮)。这也是我想从绿色拇指开始的原因:绿色意味着它还没有被触及。这是我的重点。
提前致谢。
解决方法
我认为您不能像其他伪类一样将 ::-webkit-slider-thumb
写为内联样式。见this thread。
但是您可以使用 <style>
元素完成您的“hack”。为每个输入创建一个并添加一个唯一的选择器(例如 id
或 [name="rangeInput1"
)。
var range_els = document.querySelectorAll('input[type=range]');
range_els.forEach(range_el => {
let s = document.createElement("style");
document.head.appendChild(s);
range_el.addEventListener("input",() => {
const slider_value = range_el.value;
let thumb_color;
if (slider_value == 0) {
thumb_color = "#9CCF47";
} else {
thumb_color = "#006CBA";
}
s.textContent = `.slider#${range_el.id}::-webkit-slider-thumb { background-color: ${thumb_color} !important; } .slider#${range_el.id}:-moz-range-thumb { ${thumb_color} !important; }`;
});
range_el.oninput = function() {
this.style.background = 'linear-gradient(to right,#006CBA 0%,#006CBA ' + 100 * (this.value - 1) / 4 + '%,#efefef ' + 100 * (this.value - 1) / 4 + '%,#efefef 100%)';
};
});
.slider {
-webkit-appearance: none;
height: 8px;
border-radius: 4px;
background-color: #efefef;
border: 1px solid #b2b2b2;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #9CCF47;
cursor: pointer;
}
<body>
<input type="range" min="1" max="5" value="0" class="slider" name="rangeInput1" id="rangeInput1">
<input type="range" min="1" max="5" value="0" class="slider" name="rangeInput2" id="rangeInput2">
</body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。