Question

我正在制作一个自定义进度条，我想根据其width值更改颜色。也就是说，如果.p-bar[style*="width: 10"] { background-color: red; }小于50％，则该条为红色；如果大于50，则该条为绿色。

我知道我可以像这样使用属性选择器：

{{1}}

但是这样做意味着我将不得不在每一步中赋予一个值...

P.D。 sass解决方案可以接受，谢谢。

修改

P.P.D。 js解决方案也是可以接受的...但是我想知道是否没有办法用CSS来完成我想要的事情。

Answer 1

好吧...就像之前所说的那样，似乎不可能仅使用CSS来做我想做的事情。但是，使用javascript根据值更改颜色似乎很容易。

这是我最终使用的代码（我有一个按钮，将“进度” AKA width的10％添加到我的栏中）：

var progressed = 0; /* Variable to handle the width % */
$('.btnAddProgress').click(function(){
    var progressBar = $(this).parent().find('.progress-bar'); /* Get the bar */
    progressed += 10;
    progressBar.css({
        'width': progressed + '%', /* Apply the changed width */
    });

var progPrcnt = progressBar.width() / progressBar.parent().width() * 100; /* Wanted to get the actual element width because I figured I would not always have a variable like my "progressed" which value matches the actual width */
if (progPrcnt < 50) {
    progressBar.css({
        'background-color': '#f00',
    });
} else {
    progressBar.css({
        'background-color': '#0f0',
    });
}
});

无论如何...事实证明，使用JS做我想做的事情相当容易，最终很快就弄清楚了，然后不想忘了回到我的岗位并指出我是多么愚蠢。

无论如何，我一直在说我还在学习，非常感谢您的耐心配合。

如何根据样式值选择元素？

1 个答案: