如何调用 css class 作为 html 元素中的函数？

Question

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

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>

如何调用 css class 作为 html 元素中的函数？

how to call css class as function in html elements?

html

javascript

css

sass

less