Как я могу применить значения заполнения динамически на основе значения из класса CSS?

Question

У меня есть родительский класс с именем "глубиной-0", и он содержит динамически "глубину-1" и "глубину-2", что я хочу, чтобы динамически захватить это число и умножить на отступ слева

.depth-1 {
  padding-left: 15px;
}

.depth-2 {
  padding-left: 30px;
}

.depth-3 {
  padding-left: 45px;
}

.depth-4 {
  padding-left: 60px;
}

.depth-5 {
  padding-left: 75px;
}

.depth-6 {
  padding-left: 90px;
}

.depth-7 {
  padding-left: 105px;
}

.depth-8 {
  padding-left: 120px;
}

.depth-9 {
  padding-left: 135px;
}

.depth-10 {
  padding-left: 150px;
}

хочу

.depth-n {
    padding-left: calc (n * 15px)
}

где "n" - любое число.

Answer 1

Мы можем использовать способ достижения того, что вы ищете, например:

div{
    padding-left: calc(15px * var(--depth));
    margin-bottom: 3px;
}

<div style="--depth:1">a</div>
<div style="--depth:2">a</div>
<div style="--depth:3">a</div>
<div style="--depth:4">a</div>

В качестве альтернативы, вы также можете добиться этого, используя jQuery :

$("[class^=depth-]").each(function(){
   $(this).css('padding-left',($(this).attr('class').match(/(?:^|\s)depth-(\d+)(?:$|\s)/)[1]*15) + "px");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="depth-0">0</div>
<div class="depth-1">a</div>
<div class="depth-2">b</div>
<div class="depth-3">c</div>
<div class="depth-4">d</div>

В качестве альтернативы Использование простого Javascript:

document.querySelectorAll('[class^=depth-]').forEach(function(el) {
  el.style.paddingLeft = (el.className.match(/(?:^|\s)depth-(\d+)(?:$|\s)/)[1] * 15) + "px";
})

<div class="depth-0">0</div>
<div class="depth-1">a</div>
<div class="depth-2">b</div>
<div class="depth-3">c</div>
<div class="depth-4">d</div>

Answer 2

вы можете использовать переменную в CSS или использовать Javascript.

data-depth - это n

например:

let data_depth = document.querySelectorAll('.depth');
let data;
[...data_depth].forEach((element) => {
  data = element.getAttribute('data-depth');
  element.setAttribute("style",`padding-left: calc(${data} * 15px) `);
});

<div data-depth="2" class="depth">add depth to data-depth</div>
<span data-depth="3" class="depth">add depth to data-depth</div>
<p data-depth="4" class="depth">add depth to data-depth</div>
<pre data-depth="5" class="depth">add depth to data-depth</div>