是否可以用JS选择<input type="range">伪元素？
我可以在我的css中设置像::-webkit-slider-runnable-track这样的元素，但是如果我想在某些事件之后更改::-webkit-slider-runnable-track的background-color （比如按钮点击或其他什么） ）？
可能吗？ 浏览器支持现在没有意义。
UPD ：问题是如何通过JS设置范围的伪元素的样式。 假设我需要动态更改范围的轨道颜色。 我不能用css设计它。
我真正需要的是类似的东西
document.getelementById('id').getPseudoElementSomehow('-webkit-slider-runnable-track').style = 'background: green'Is it possible to select <input type="range"> pseudo-elements with JS?
I can style elements like ::-webkit-slider-runnable-track in my css, but what if I want to change ::-webkit-slider-runnable-track's background-color after some event (like button click or whatever)?
Is it possible? Browsers support didn't make sense for now.
UPD: The question is how to style range's pseudo elements via JS. Let's say that I need to change range's track color dynamically. I can't just style it with css.
What I really need to is something like
document.getelementById('id').getPseudoElementSomehow('-webkit-slider-runnable-track').style = 'background: green'最满意答案
据我所知，你不能用Javascript直接选择伪元素。 唯一的解决方案是使用CSSStyleSheet.insertRule()在预期事件上添加css规则。
var button = document.querySelector('button');
button.onclick = function() {
document.styleSheets[0].insertRule('input[type=range]::-webkit-slider-runnable-track { background-color: red; }', 0);
};
.red {
background-color: red;
}
<input type="range">
<button>click me</button>
As far as I know, you can't directly select pseudo elements with Javascript. The only solution is to add css rules on the expected events with CSSStyleSheet.insertRule().
var button = document.querySelector('button');
button.onclick = function() {
document.styleSheets[0].insertRule('input[type=range]::-webkit-slider-runnable-track { background-color: red; }', 0);
};
.red {
background-color: red;
}
<input type="range">
<button>click me</button>
如何在JavaScript中选择html5 range的伪元素(How to select html5 range's pseudo-elements in JavaScript)
是否可以用JS选择<input type="range">伪元素？
我可以在我的css中设置像::-webkit-slider-runnable-track这样的元素，但是如果我想在某些事件之后更改::-webkit-slider-runnable-track的background-color （比如按钮点击或其他什么） ）？
可能吗？ 浏览器支持现在没有意义。
UPD ：问题是如何通过JS设置范围的伪元素的样式。 假设我需要动态更改范围的轨道颜色。 我不能用css设计它。
我真正需要的是类似的东西
document.getelementById('id').getPseudoElementSomehow('-webkit-slider-runnable-track').style = 'background: green'
Is it possible to select <input type="range"> pseudo-elements with JS?
I can style elements like ::-webkit-slider-runnable-track in my css, but what if I want to change ::-webkit-slider-runnable-track's background-color after some event (like button click or whatever)?
Is it possible? Browsers support didn't make sense for now.
UPD: The question is how to style range's pseudo elements via JS. Let's say that I need to change range's track color dynamically. I can't just style it with css.
What I really need to is something like
document.getelementById('id').getPseudoElementSomehow('-webkit-slider-runnable-track').style = 'background: green'
最满意答案
据我所知，你不能用Javascript直接选择伪元素。 唯一的解决方案是使用CSSStyleSheet.insertRule()在预期事件上添加css规则。
var button = document.querySelector('button');
button.onclick = function() {
document.styleSheets[0].insertRule('input[type=range]::-webkit-slider-runnable-track { background-color: red; }', 0);
};
.red {
background-color: red;
}
<input type="range">
<button>click me</button>
As far as I know, you can't directly select pseudo elements with Javascript. The only solution is to add css rules on the expected events with CSSStyleSheet.insertRule().
var button = document.querySelector('button');
button.onclick = function() {
document.styleSheets[0].insertRule('input[type=range]::-webkit-slider-runnable-track { background-color: red; }', 0);
};
.red {
background-color: red;
}
<input type="range">
<button>click me</button>
发布评论