МЕНЬШЕ Как изменить цвет фона хода выполнения, когда он достигает 100%

Привет, я только начинаю с МЕНЬШЕГО, CSS, Javascript и HTML, когда я создаю сайт. Мне было интересно, можно ли использовать LESS, чтобы проверить, равна ли ширина элемента 100%, и как только это изменит цвет фона. Как и индикатор выполнения. Если это невозможно, я бы использовал Javascript? Где бы я определяю это утверждение на примере:МЕНЬШЕ Как изменить цвет фона хода выполнения, когда он достигает 100%

.page-level-progress-menu-item-indicator-bar { 
     width:0%; 
     height:8px; 
     background-color:@primary-color; 
    }

функции Javascript:

updateProgressBar: function() { 
      if (this.model.get('completedChildrenAsPercentage')) { 
       var percentageOfCompleteComponents = this.model.get('completedChildrenAsPercentage'); 
      } else { 
       var percentageOfCompleteComponents = 0; 
      } 

      // Add percentage of completed components as an aria label attribute 
      this.$('.page-level-progress-menu-item-indicator-bar .aria-label').html(this.ariaText + Math.floor(percentageOfCompleteComponents) + '%'); 


     },

HTML:

<div class="page-level-progress-menu-item-indicator"> 
    <div id ="test" class="page-level-progress-menu-item-indicator-bar" style="width:{{completedChildrenAsPercentage}}%"><span class="aria-label" role="region" tabindex="0"></span></div> 
</div>

источник

2016-12-29 Torewin

Это на самом деле не работает CSS хау. CSS является декларативным, и понятие «проверки» размера элемента не имеет большого смысла. – Pointy

LESS - это «предварительный процессор» для CSS. CSS - это набор правил, которые применяются к документу и не содержат никакой информации о структуре документа. Для этой задачи вам нужно будет использовать JavaScript (или jQuery - это библиотека JavaScript) после загрузки страницы. –

Я предполагаю, что вы уже используете JS для увеличения ширины полосы выполнения, поэтому я предлагаю вам добавить класс ** полный ** через JS, когда вы достигнете 100%. Используйте этот '.full', чтобы изменить« background-color »в вашем LESS. –

LESS и CSS не построены, чтобы выполнить такую задачу. Правила CSS устанавливаются до загрузки вашей страницы. вы должны сделать это с помощью javascript.

вот простой пример, написанный на лету. вы можете использовать его идею или персонализировать сам пример.

var innerWidth = 0; 
 
var interval = setInterval(function() { 
 
    if($(".inner-progress").width() >= $(".progress-bar").width()) { 
 
    $(".inner-progress").addClass("completed"); 
 
    clearInterval(interval); 
 
    } else { 
 
    \t innerWidth = $(".inner-progress").width(); 
 
    innerWidth += $(".progress-bar").width()/100; 
 
    $(".inner-progress").width(innerWidth + "px"); 
 
    } 
 
}, 10);

.progress-bar, .inner-progress { 
 
    height: 30px; 
 
} 
 
.progress-bar { 
 
    background: grey; 
 
} 
 
.inner-progress { 
 
    background: red; 
 
    width: 10%; 
 
} 
 
.completed { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="progress-bar"> 
 
    <div class="inner-progress"> 
 
    </div> 
 
</div>

источник

2016-12-29 20:07:15

МЕНЬШЕ Как изменить цвет фона хода выполнения, когда он достигает 100%

ответ

Смежные вопросы