dynamicznie zmieniaj styl żadnego elementu html

Question

Używam angularJs i chcę dynamicznie zmieniać styl atrybutu. Zwykle robiłbym to z ng-style w elemencie HTML.

Ale chcę zastosować style do ścieżki wejściowej zakresu. Ten element może być dostępny w css w ten sposób: .slider::-webkit-slider-runnable-track (Jako przykład dla selektora Webkit). Czy mogę zmienić styl takiego atrybutu w funkcji, w której mam identyfikator tego elementu?

Eg (jak by to zrobić w jQuery):

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

Answer 1

JavaScript zazwyczaj nie mają dostępu do elementów pseudo, jedno możliwe obejście byłoby wstawić tag styl

$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

Innym sposobem jest zachowanie stylów w arkuszu stylów i użycie innej klasy dla innego stylu.

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

a następnie zrobić

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

FIDDLE

Answer 2

dla angularjs polecam nie używać $ zakres, ale skorzystać z usługi, fabryka lub katalogu zamiast na typ CSS pracy na szablonie html.

musi jednak jeśli nadal chcesz wziąć tego podejścia można:

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

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

gdzie można przekazać id dla elementu, cssClass z klasy css i używać add jako wartość bool; przekazać, co chcesz.