Как стилизировать динамически генерируемый контент посредством CSS?

Question

[Андрей К]

Добрый день. Имеется страница с динамически генерируемым контентом. Для генерации используется JavaScript фреймворк. Генерация происходит примерно раз в 10 минут.

Вот примерный HTML код элемента:

<div class="element">
  <span class="amount">$104,105.45</span>
</div>

Возможно ли сделать стилизацию через CSS выводимой суммы, к примеру как-то так:


Важно не трогать логику JavaScript фреймворка. Может есть какой-либо jQuery плагин, или еще какие-нибудь простые варианты, чтобы было за что зацепиться при стилизации?

Заранее спасибо.

Comments

[V Sh.]

Ну чисто CSS, думаю, не получится, т.к. дробная часть никак не отделена от основной. Вот если бы она была в каком-нибудь контейнере, то да, без проблем. Возможно это сделать через css свойства через обработку на js. Пробегаемся по всем div'ам, через регулярку или как удобно оборачиваем цену и ее дробную часть в необходимые классы.

[Андрей К]

V Sh.:
var amount = $('.amount').text();
var aSign = amount.slice(0, 1);
var aDollars = amount.match( /\$(.*)\./i );
var aCents = amount.slice(-2);
var finalAmount = '' + aSign + '' \
+ aDollars[1] + '' + aCents + '';
$('.amount').html(finalAmount);

В принципе вот вариант как обернуть, но как прикрутить к нему реакцию на изменение контента?

[V Sh.]

Андрей К: Ну тут надо смотреть где генерируется динамический контент и сразу после него обработчик положить. События onChange применимы только к элементам формы...

Answer 1

[WQP]

Для знака $
.amount:first-letter { ... }

Для последних цифр нужно либо прогонять через JS для добавления тегов, либо оставлять как есть

Comments

[V Sh.]

О, а это CSS3 или уже CSS4?

[Андрей К]

first-letter не работает для знака доллара.

[trushka]

V Sh., это CSS2))

[V Sh.]

trushka: Эх, даже так) Никогда сильно не пользовался псевдо-элементами и псевдо-классами...

Answer 2

[Андрей К]

Сделал через Mutation Observer. Спасибо всем, кто откликнулся.