动态地改变样式html元素

我使用angularJs并且想要动态地改变属性的样式。通常我会在html元素中使用ng-style。动态地改变样式html元素

但我想将样式应用到范围输入的轨迹。可以像这样在css中访问此元素：.slider::-webkit-slider-runnable-track（作为webkit选择器的示例）。我可以在一个函数中为这个元素的id改变这种属性的样式吗？

EG（我会怎么做jQuery中）：

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

来源

2016-03-09 j0h4nn3s

的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; 
}

，然后AngularJs我建议不要使用$范围，但使用的服务，工厂或目录，而不是用于在HTML模板工作的CSS类型做

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

FIDDLE

来源

2016-03-09 00:59:51 adeneo

这将在每次更改中添加一个新的样式元素。假设更改函数会被调用很多次，那么我的html中会有很多样式标签，对吧？ – j0h4nn3s

我添加了一个样式标签，直接绑定到html（这是你所建议的一点小过载）。看来我必须访问具有id和类的元素：'＃id.class :: selector'。它不适用于唯一的ID。 – j0h4nn3s

。

但是如果你还是必须要采取这种方式，您可以：

$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为布尔值;通过你想要的东西。

来源

2016-03-09 01:39:24 CodeOverRide

动态地改变样式html元素

回答

相关问题