如何在 HTML 元素中调用 CSS 类作为函数

Question

如何

实现调用 CSS 类作为函数？我不想为每个宽度值生成类？有没有像下面这样的解决方案？

我正在尝试根据后端代码更新样式的宽度值 (宽度表示产品的数量(。

<style>
    .dynamicWidth(@param){
    width:@param px;
    }
</style>
    <div class='dynamicWidth(40)'></div>

我可以通过使用内联样式代码

来解决它，但由于内容安全策略，我不想使用内联样式代码。

//I don't want to use it like this.
<style>
  .dynamicWidth{
        dynamicWidth:var (--param);
  }
</style>
<div class="dynamicWidth" style="--param : 40;"></div>

Answer 1

你可以用javascript做到这一点：

var elements = document.getElementsByClassName("dynamicWidth");
Array.from(elements).forEach((element) => {
  element.style.width = element.getAttribute("data-width") + "px";
});

.dynamicWidth {
  height: 20px;
  background: red;
}

<div class='dynamicWidth' data-width='40'></div>
<div class='dynamicWidth' data-width='60'></div>
<div class='dynamicWidth' data-width='90'></div>