如何根据CSS类的值动态应用填充值

Question

我有一个名为" depth-0"的父类，它包含动态" depth-1"one_answers" depth-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>