Как выбрать элемент на основе значения стиля?

Question

Я делаю пользовательский индикатор выполнения, который хочу изменить цвет в зависимости от его значения width.т. е. если width меньше 50%, полоса красная, если она больше, то полоса зеленая.

Я знаю, что могу использовать селектор атрибутов так:

.p-bar[style*="width: 10"] {
    background-color: red;
}

Но делать это так, как это, означало бы, что мне придется присваивать значение на каждом этапе пути ...

Приемлемые решения PD sass, спасибо.

Редактировать

Решение PPD js также приемлемо ... но я хотел бы знать, если нет никакого способа сделать то, что я хочу, с помощью CSS.

Answer 1

Хорошо ... так как было сказано ранее, кажется, что невозможно сделать то, что я пытался сделать, используя только CSS.Однако кажется довольно легко изменить цвет в зависимости от значения, используя javascript.

Вот код, который я в итоге использовал (у меня есть кнопка, чтобы добавить 10% «прогресса» AKA width к моей панели):

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 было довольно легко сделать то, что я хотел сделать, и вскоре выяснил это, а затем не захотел забытьВернись к моему сообщению и укажи, насколько я был глуп.

В любом случае, как я всегда говорю, я все еще учусь, большое спасибо за твою помощь, терпение.