Question

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

但我想将样式应用于范围输入的轨道。可以在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)
};

FIDDLE

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

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

然后再做

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

FIDDLE

Answer 2

对于AngularJs我建议不要使用$ scope，而是使用服务，工厂或目录代替html模板上的CSS类型的工作。

但是如果你仍然想要采用这种方法，你可以：

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

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

您可以从css类传递id元素cssClass，并使用add作为bool值;通过你想要的任何东西。

动态更改无html元素的样式

2 个答案: