Нужно уменшать на 0.1 единицу в переменной color

Question

Хочу написать код на JS чтоб покрасить все точки с изменением прозрачности для каждой следующей точки. Вот код, сейчас все точки с одной прозрачностью

const dots = document.querySelectorAll(".dot");

let color = "rgba(51, 51, 51, 1)";

dots.forEach(function dot(element) {
  element.style.background = color;
});

.dots {
  width: 9.93%;
  display: flex;
  justify-content: space-between;
}

.dot {
  cursor: pointer;
  width: 11px;
  height: 11px;
  border-radius: 100%;
}

<div class="dots">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

Answer 1

const dots = document.querySelectorAll(".dot");

let opacity = 1;

dots.forEach(element => {
    opacity -= 0.1;
    opacity = (opacity < 0) ? 0 : (opacity > 1) ? 1 : opacity; // чтобы opacity всегда был в диапазоне [0..1]
    element.style.background = `rgba(51, 51, 51, ${opacity})`;
});

так?

Answer 2

Ответ от @Zhihar уже принятый, но мне кажется он слишком усложненный, не вижу смысла в таком вложении тернарных операторов. Да и проблема с округлением решается делением на 10.

let opacity = 0;

document.querySelectorAll(".dot").forEach((dot) => {
  opacity = (opacity + 1) % 10;
  dot.style.setProperty('--dots-opacity', (10 - opacity) / 10);
});

.dot {
  width: 11px;
  height: 11px;
  border-radius: 100%;
  background-color: rgba(51, 51, 51, var(--dots-opacity));
}

<div class="dots">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>

БЛОГ НА HUSL

Нужно уменшать на 0.1 единицу в переменной color

Ответы (2 шт):