javascript - 如何在html元素中调用css类作为函数？

Question

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

I am trying to update style's width value according to back-end code (width represents product's amount).

<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>