Как выбрать элемент на основе значения стиля?
Я делаю собственный индикатор выполнения, который я хочу изменить в зависимости от его значения width. то есть, если width меньше 50%, полоса красная, если больше, полоса зеленая.
Я знаю, что могу использовать селектор атрибутов так:
.p-bar[style* = "width: 10"] {
background-color: red;
}
Но делать это так означало бы, что мне придется назначать значение на каждом этапе пути...
П.Д. решения sass приемлемы, спасибо.
Редактировать
ППД js также приемлемо... но я хотел бы знать, нет ли никакого способа выполнить то, что я хочу, с помощью CSS.
О... это обескураживает. Ну, я просто жестко, что был способ сделать «10» переменной или что-то в этом роде. Думаю, я попрошу решение js, это тоже будет хорошо. Спасибо за ответ кстати.
Что такое HTML/код, который меняет индикатор выполнения?
Легче помочь, если вы добавите еще немного кода
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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, и в конце концов я понял это довольно скоро, а затем не желая забыл вернуться к моему посту и указать, насколько я был глуп.
В любом случае, как я всегда говорю, я все еще учусь, большое спасибо за вашу помощь и терпение.
Если
styleне находится в HTML... ты не можешь