Как вызвать класс css как функцию в элементах html?
как я могу вызвать класс 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>
Вы не можете использовать класс css как функцию в html. вы можете использовать функцию JQuery для достижения вашей задачи
@PavelTřupek Я не хочу использовать встроенный стиль
@HardikLeuwa, могу ли я добиться этого с помощью LESS или SCSS?
@more2know, значит, вы не хотите style = "", но можно ли добавить атрибут style через JS? Или это также попадет в вашу политику безопасности контента, поскольку она в основном делает то же самое? Я не думаю, что это возможно без атрибута style (добавляется либо вручную, либо с помощью JS). За исключением случаев, когда вам разрешено использовать data-attributes (например, data-width = "50px")?
@elveti нет проблем с использованием стиля в js, с этим можно справиться, добавив к нему некоторые атрибуты хеширования CSP.
Можете ли вы использовать атрибут данных (data-width), а не атрибут класса? Было бы гораздо безопаснее.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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>Впечатляет, но очень хрупкий на практике. Если есть что-то еще (преднамеренно или через бэкэнд или JS-библиотеку), добавленное к значению класса, kablooey.
стиль = "ширина: XXpx;" но это не очень хорошая идея (вы должны знать, какую ширину на каких элементах вы используете)