Question

嗨，我刚刚开始使用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>

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

LESS当达到100％时如何更改进度条背景颜色

1 个答案: