我正在尝试在 angular 2 元素中动态编辑那种 css 属性,但没有成功:(
progress::-moz-progress-bar {
background: #278ce2;
}
我想在同一个页面上添加 n 个进度条。背景颜色由用户选择并动态切换。我们的想法是为每个像这样创建的栏添加一个 css 属性:
classname::-moz-progress-bar {
background: color;
}
classname::-webkit-progress-value {
background: color;
}
classname[aria-valuenow]:before {
background: color;
}
因为我希望能够根据用户的需要创建尽可能多的条,所以我之前无法命名这些类。
有没有人知道如何做到这一点?如果您需要更多详细信息,请问我。
最佳答案
无法找出如何编辑那些伪元素。但我设法通过用 div 重新创建进度条来做我想做的事。这是可以帮助某人的代码:
在 HTML 中(使用 Angular 2)
<div class="probar">
<div class="inside-probar" [ngStyle]="{background:color, width: ((value * 100)/max) + '%'}">
{{value}}/{{max}}
</div>
</div>
在 CSS 中
.probar{
height: 20px;
width: 140px;
border-radius: 5px;
background: #ccc;
padding: 3px;
}
.inside-probar{
text-align: center;
height: 20px;
width: 100%;
max-width: 100%;
border-radius: 5px;
margin-left: 0px;
color: black;
}
关于css - 使用 angular 2 动态编辑伪元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42981456/