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>

及以下是课程级别的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;
}

以上用于class的代码分别编码为level1，level2，level3，level4，level5。但是从JSP代码开始，类级别是动态的，并且可以基于<％= dataDepth％>不断增加，并且没有限制。 CSS还可以相对于JSP代码动态更改吗？有任何例子或建议吗？

Answer 1

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

您可以在嵌入式样式中使用--var个CSS，并使用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>

班级动态CSS

1 个答案: