Less 100 %에 도달했을 때 진행률 막대 배경색을 변경하는 방법

안녕하세요 저는 웹 사이트를 구축하면서 LESS, CSS, Javascript 및 HTML을 시작하고 있습니다. 요소의 너비가 100 %인지 한 번 확인하고 LESS를 사용하여 배경색을 변경했는지 확인하는 것이 가능한지 궁금합니다. 진행률 표시 줄이 완료되는 것과 같습니다. 가능하지 않으면 Javascript를 사용합니까?Less 100 %에 도달했을 때 진행률 막대 배경색을 변경하는 방법

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

자바 스크립트 기능 : 내가 예를 사용하여 그 진술을 정의 할 경우

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는 선언적이며 요소 크기를 "확인"한다는 개념은별로 의미가 없습니다. – Pointy

LESS는 CSS를위한'전처리 기 '입니다. CSS는 문서에 적용되고 문서 구조에 대한 정보를 보유하지 않는 규칙 집합입니다. 이 작업을 수행하려면 페이지가로드 된 후 JavaScript (또는 jQuery - JavaScript 라이브러리)를 사용해야합니다. –

당신은 이미 진행 막대 너비를 늘리기 위해 JS를 사용하고있는 것 같아요. 그래서 100 %에 도달하면 JS를 통해 ** 전체 ** 클래스를 추가 할 것을 제안합니다. 이'.full'을 사용하여 LESS의'background-color'를 변경하십시오. –

LESS 및 CSS 등의 작업을 수행하도록 제작되지 않습니다. CSS 규칙은 페이지가로드되기 전에 설정됩니다. 당신은 자바 스크립트로 그렇게해야합니다.

여기에 간단한 예가 나와 있습니다. 당신은 그 아이디어를 사용하거나 예제 자체를 개인화 할 수 있습니다. 정말 어떻게 CSS 작업이 아니다

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

Less 100 %에 도달했을 때 진행률 막대 배경색을 변경하는 방법

답변

관련 문제