动态更改无html元素的样式

Question

我正在使用angularJs并想要动态更改属性的样式.通常我会ng-style在html元素中执行此操作.

但我想将样式应用于范围输入的轨道.可以在css中访问此元素:( .slider::-webkit-slider-runnable-track作为webkit选择器的示例).我可以在具有此元素的id的函数中更改此类属性的样式吗？

例如(我将如何在jquery中执行此操作):

$scope.change = function(id, value) {
        $('#'+id+'::-webkit-slider-runnable-track').css('background-image',value);
};

Answer 1

JavaScript 通常无法访问伪元素，一种可能的解决方法是插入样式标签

$scope.change = function(id, value) {
    var style  = document.createElement('style');
    var styles = '{ background: red }';

    style.innerHTML = '#' + id + '::-webkit-slider-runnable-track ' + styles;
    document.head.appendChild(style)
};

小提琴

另一种方法是将样式保留在样式表中，并为不同的样式使用不同的类

#test.red::-webkit-slider-runnable-track {
    background : red;
}

然后做

document.getElementById('test').classList.add('red');

小提琴