Javascript 是否可以根据元素值设置：后样式？

我想对数字输入字段进行一些动态样式设置，因此我将其放在span元素中，以便添加非数字字符：

<span class='formatter'>
    <input type='number'>0.00</input>
</span>

---

这是可行的，%会出现，但我希望它正好出现在输入值之后。所以，我可以使用left:200px；将%推到输入字段的末尾，但我希望它显示在数字本身之后，无论是0.00还是100.00。有没有办法将内容位置与输入值联系起来？

我会放弃css:after属性，编写如下内容：

<div class="formatter">
    <input type="number" ng-model="$ctrl.number">0.00</input>
    <span ng-if="$ctrl.number <= 100" class="pretty_percentage">%</span>
</div>

0
%

---

然后定制

pretty\u百分比

css

首先，您的标记无效：

是一个。
您可能希望使用以下选项：

---

工作示例：

var-app=angular.module（'app'，['ui.utils.masks']）；
app.controller（'testController'，['$scope'，函数（$scope）{
$scope.number=100；
}])

一个自定义过滤器也很适合这里。@Phix我愿意试一试，尽管我以前从未这样做过……你能举一个这样的例子吗？@monkeywithachinegun当然，如果遇到任何问题，请检查并报告。@Phix我试过过滤器，这是一个很好的解决方案，如果我能找出我做错了什么。这些HTML元素是动态创建的，所以我做了如下操作（其中'elem'是新创建的输入元素）：elem.innerHTML='{{{'+thevalue+'| currency}}'。当它运行时，它只显示一个数值（本例中为100），但如果我进入浏览器控制台，我可以看到它显示为$100.00。因此，似乎应用了过滤器，但我一定是配置错误。可能innerHTML设置的值不正确？创建一个新问题，您不能使用innerHTML设置它。还有其他可用的机制。感谢您的指导和示例-非常好。我会深入研究一下，看看能想出什么办法。

<div class="formatter">
    <input type="number" ng-model="$ctrl.number">0.00</input>
    <span ng-if="$ctrl.number <= 100" class="pretty_percentage">%</span>
</div>

<input placeholder="0.00%">