thay đổi kiểu động của phần tử html

Question

Tôi đang sử dụng angularJs và muốn thay đổi kiểu của thuộc tính động. Thông thường tôi sẽ làm điều này với ng-style trong phần tử html.

Nhưng tôi muốn áp dụng kiểu cho bản nhạc của đầu vào phạm vi. Phần tử này có thể được truy cập trong css như sau: .slider::-webkit-slider-runnable-track (Ví dụ cho bộ chọn webkit). Tôi có thể thay đổi kiểu cho thuộc tính như vậy trong một hàm mà tôi có id cho phần tử này không?

Ví dụ (làm thế nào tôi sẽ làm điều đó trong jquery):

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

Answer 1

Javascript thường không có quyền truy cập vào các yếu tố giả, một workaround có thể sẽ để chèn một thẻ phong cách

$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

Một cách khác là giữ các kiểu trong biểu định kiểu và chỉ sử dụng một lớp khác cho một kiểu khác

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

và sau đó làm

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

FIDDLE

Answer 2

cho AngularJs Tôi khuyên bạn nên không sử dụng $ phạm vi nhưng sử dụng dịch vụ, nhà máy hoặc thư mục thay cho loại CSS công việc trên mẫu html.

tuy nhiên nếu bạn vẫn phải muốn áp dụng cách này bạn có thể:

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

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

nơi bạn có thể vượt qua id cho các phần tử, cssClass từ lớp css của bạn và sử dụng add như giá trị bool; vượt qua những gì bạn muốn.