html - 类级别的动态CSS

Question

我有一个如下所示的 JSP 代码。

<table id="mytable" cellspacing="0">
<tr data-depth="0" class="collapse level0">
<td></td>
<td></td>
<td></td>
</tr>
////...
/...//
<tr data-depth="<%=dataDepth%>" class="collapse level<%=dataDepth%>">
<td></td>
<td></td>
<td></td>
</tr>
</table>

下面是类(class)的CSS

.level1 td:first-child {
    padding-left: 15px;
}
.level2 td:first-child {
    padding-left: 30px;
}
.level3 td:first-child {
    padding-left: 45px;
}
.level4 td:first-child {
    padding-left: 60px;
}
.level5 td:first-child {
    padding-left: 75px;
}

上面的类代码针对 level1、level2、level3、level4、level5 进行了硬编码。但是从 JSP 代码来看，类级别是动态的，可以根据 <%=dataDepth%> 不断增加，并且没有限制。 css 是否也可以根据 JSP 代码动态更改？有什么例子或建议吗？

Answer 1

我有使用它的想法。希望对您有所帮助。

您可以在内联样式上使用 css 的 --var 并使用 calc 对其进行动态处理。见片段。

.level[data-depth] td:first-child{
  padding-left: calc(var(--depth) * 15px);
}

<table id="mytable" cellspacing="0">
  <tr data-depth="0" style="--depth:0;" class="collapse level">
    <td>a</td>
    <td>a</td>
    <td>a</td>
  </tr>
  <tr data-depth="1" style="--depth:1;" class="collapse level">
    <td>b</td>
    <td>b</td>
    <td>b</td>
  </tr>
  <tr data-depth="2" style="--depth:2;" class="collapse level">
    <td>c</td>
    <td>c</td>
    <td>c</td>
  </tr>
  <tr data-depth="<%=dataDepth%>" style="--depth:<%=dataDepth%>;" class="collapse level<%=dataDepth%>">
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>