изменить стиль динамически ни одного элемента html

Question

Я использую angularJs и хочу динамически менять стиль атрибута. Обычно я делал это с помощью ng-style в элементе html.

Но я хочу применить стили к треку ввода диапазона. Этот элемент доступен в css следующим образом: .slider::-webkit-slider-runnable-track (В качестве примера для селектора веб-китов). Могу ли я изменить стиль для такого атрибута в функции, где у меня есть идентификатор для этого элемента?

Например (как я хотел бы сделать это в 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) 
}; 

FIDDLE

Другим способом было бы сохранить стили в таблице стилей и просто использовать другой класс для другого стиля

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

, а затем сделать

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

FIDDLE

Answer 2

для AngularJs я рекомендую не использовать $ объем, но использовать службы, завод или каталог вместо этого типа CSS работы по шаблону HTML.

Однако, если вы все равно должны хотеть принять этот подход, вы можете:

$scope.change = function(id, cssClass, add) { 
    var el = angular.element(document.querySelector(id)); 

    if (add) { 
     el.addClass(cssClass); 
    } else { 
     el.removeClass(cssClass); 
    } 
} 

, где вы можете пройти id для элемента, cssClass из вашего класса CSS и использовать add в качестве значения BOOL; передай, что хочешь.