Пытается «псевдоним» селектора элементов CSS во время выполнения

Question

Я пытаюсь установить положение шрифта удивительной иконки в поле ввода во время выполнения. Чтобы сделать это, я надеялся, что во время выполнения будет рассчитан стиль, как это было сделано с другими элементами таблицы стилей. Тем не менее, я стучу головой о стену с этим. Я не включил jfiddle, потому что моя проблема заключается в том, чтобы сделать элемент динамическим, и я не верю, что смогу это сделать в скрипке.

Этот код работает. Знак доллара отображается в правой части поля ввода:

<div class="col-md-6 form-control-static"> 
    <div class="input-icon right"> 
     <i class="fa fa-dollar"></i> 
      <input> 

Обратите внимание, что я использовал «право», чтобы получить значок справа. То, что я хочу сделать, это заменить этот элемент на общий элемент и динамически установить это значение в вычисленном css.

Так что я на самом деле хочу сказать, это:

<div class="input-icon currencyPlacement"> 

А потом в вычисленных стилях как-то решить «currencyPlacement», чтобы быть «влево» или «вправо», основываясь на условиях, которые я вычислю.

<style> 
     .currencyPlacement { ????? } 
    </style> 

Я понимаю, что я мог бы установить это с помощью JavaScript, и я мог бы также иметь это Compute на полевом уровне. Я думал, что может быть лучший способ эффективно сгладить элемент. Извините за длинное описание и большое спасибо заблаговременно.

Answer 1

Вы сказали, что генерируете все это по коду. Так что, предположительно, ваш код «знает» валюту и ее размещение. Мне кажется гораздо более понятным использовать ваш первоначальный подход. Или, возможно, вместо «right» или «currencyPlacement» назначить стиль, который соответствует валюте, как

.currUSD, .currEUR, .currATS {CSS, чтобы поместить его прямо} .currXYZ {CSS, чтобы поместить его оставили}

И в Если вы укажете валюту на той же странице, не будет никакого способа обойти JS, чтобы назначить соответствующий класс этому полю ввода.

Обновление: ответьте на ваш комментарий: поскольку вы вставляете FA-тег, связанный с USD, я предполагаю, что вы знаете, какая валюта будет при создании страницы. Итак, если у вас есть эти знания, не можете ли вы затем убедиться, что элементы управления отображаются в соответствующем порядке, как в этом example? Я думаю, что это сделало бы намного проще - иначе я бы только знал, как делать с JS, но я не вижу решения с помощью CSS, боюсь.