Как вызвать класс CSS как функцию в HTML-элементы? - PullRequest
Новая
       16

Как вызвать класс CSS как функцию в HTML-элементы?

2 голосов
/ 07 июня 2019

как мне добиться вызова класса 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>

1 Ответ

3 голосов
/ 07 июня 2019

Вы можете сделать это с помощью 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>
...