如何根据CSS类的值动态应用填充值？
如何根据CSS类的值动态应用填充值？
提问于 2019-07-08 17:20:42
我有一个名为“深度-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“是任何数字。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-07-08 17:59:09
我们可以用这个方法来实现你想要的，就像这样：
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>
Stack Overflow用户
发布于 2019-07-08 18:05:47
可以在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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56939809
复制相关文章
相似问题
腾讯云开发者
