cambia stile dinamicamente di nessun elemento html

Question

Sto usando angularJs e voglio cambiare lo stile di un attributo in modo dinamico. Normalmente lo farei con ng-style nell'elemento html.

Ma voglio applicare gli stili alla traccia di un intervallo di input. Questo elemento è accessibile in css in questo modo: .slider::-webkit-slider-runnable-track (Come esempio per il selettore webkit). Posso cambiare lo stile per tale attributo in una funzione in cui ho l'id per questo elemento?

Eg (come vorrei farlo in jQuery):

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

Answer 1

Javascript genere non hanno accesso agli elementi della pseudo, una possibile soluzione potrebbe essere quella di inserire un tag stile

$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

Un altro modo sarebbe quello di mantenere gli stili nel foglio di stile e utilizzare solo una classe diversa per uno stile diverso

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

e quindi fare

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

FIDDLE

Answer 2

per AngularJs vi consiglio di non usare $ portata, ma utilizzare il servizio, in fabbrica o directory, invece, per il tipo di CSS di lavoro sul modello HTML.

se si deve ancora voglia di adottare questo approccio è possibile:

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

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

dove è possibile passare id per elemento, cssClass dalla classe CSS e utilizzare add come valore bool; passare ciò che vuoi