html - 动态更改 css 类的属性

Question

我正在尝试构建类似 chrome 的选项卡，它可以根据选项卡的数量动态地为选项卡分配宽度。 我有以下 CSS 类:

.myTab{
   width: 100px;
}

在每次添加新标签或关闭现有标签时，我通过将父 div 的总宽度除以标签数量来计算每个标签的宽度。

这是我的 html 代码:

<div class="myTabList">
    <div class="myTab" *ngFor="let tab of tabs; let i = index" >
        {{i + 1}}
    </div>

</div>
<button class="btn btn-default addTabButton" (click)="addMyTab()"></button>

现在，对于 myTab CSS 类，我想动态更改宽度。 一种方法是遍历我的整个选项卡列表并更改宽度。 但我在想是否可以只更改 myTab 类的 width 属性。如果可能，则无需遍历整个选项卡列表，因为该类已应用于所有选项卡。 在 css 中甚至可以更改 css 类的属性吗？

更新 我还需要标签宽度不超过 max-width 以确保当标签很少时，它们不会占据整个宽度。这就是为什么使用 table 和 table-cell 没有帮助。

Answer 1

CSS 表格可以做到这一点。

.mytab {
  border: 1px solid red;
  height: 25px;
  display: table-cell;
}

.myTabList {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin-bottom: 1em
}

<div class="myTabList">
  <div class="mytab"></div>
  <div class="mytab"></div>
  <div class="mytab"></div>
  <div class="mytab"></div>
  <div class="mytab"></div>
</div>

<div class="myTabList">
  <div class="mytab"></div>
  <div class="mytab"></div>
  <div class="mytab"></div>
  <div class="mytab"></div>
</div>

<div class="myTabList">
  <div class="mytab"></div>
  <div class="mytab"></div>
</div>