LESS 如何在进度条达到 100% 时更改背景颜色答案

【问题标题】：LESS How to change a progress bar background color when it reaches 100%LESS 如何在进度条达到 100% 时更改背景颜色
【发布时间】：2016-12-30 05:45:57
【问题描述】：

您好，在构建网站时，我刚刚开始使用 LESS、CSS、Javascript 和 HTML。我想知道是否可以使用 LESS 来检查元素的宽度是否为 100%，并且一旦更改背景颜色。就像一个正在完成的进度条。如果不可能，我会使用 Javascript 吗？我将在哪里使用示例定义该语句：

.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>

【问题讨论】：

这并不是 CSS 的工作原理。 CSS 是声明性的，“检查”元素大小的概念没有多大意义。
LESS 是 CSS 的 pre-processor。 CSS 是一组应用于文档的规则，不包含有关文档结构的任何信息。对于该任务，您需要在页面加载后使用 JavaScript（或 jQuery - 这是一个 JavaScript 库）。
我猜你已经在使用JS来增加你的进度条宽度，所以我建议你在达到100%时通过JS添加一个full类。使用此.full 更改您的LESS 中的background-color。
我在主帖中添加了 javascript 函数。如果百分比 = "100" 然后 .addClass .full 到正确的类，我会做类似的事情吗？
也粘贴你的进度条html代码

标签： javascript html css less

【解决方案1】：

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 {
  	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>

【讨论】：