Html 使用CSS将数字格式化为货币

只是想知道是否有人知道是否可以只使用CSS将元素的内容格式化为货币。如果可能的话，能够在CSS中显示值会很好，但是找不到任何东西，所以我不会屏住呼吸：）

.dollars:在{content:'$'；}之前
纯CSS:25153.3


理想格式：25153.30美元

这个例子如下：

纯CSS:$25153.3

理想格式：25153.30美元

---

另外，我知道使用javascript是相当简单的。如果你问CSS中的数字格式（即，从字符串解析一个数字，然后用千位分隔符、小数分隔符、固定小数位数等对其进行格式设置），那么不，在CSS中是不可能的，这不是CSS设计的目的

如果您想进行任何格式化，那么最好使用XSLT。例如：

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template match="span[@class='dollars']">
        <span>
            <xsl:text>$</xsl:text>
            <xsl:value-of select="format-number(current(), '###,###.00')"/>
        </span>
    </xsl:template>

    <xsl:template match="@* | node()">
        <xsl:copy>
            <xsl:apply-templates select="@* | node()"/>
        </xsl:copy>
    </xsl:template>
</xsl:stylesheet>

$

货币格式可以通过CSS和一点Javascript实现，这是解析数字以添加逗号所需的。CSS类添加了额外的样式，如负号（红色）或货币符号（即$美元符号）。方法如下：

1） 将值转换为数字（根据区域设置添加逗号）

2） 添加一个类以确定它是负值还是正值（即红色）

有关示例代码和css，请参见此处的更多详细信息：

---

很遗憾，这不适合您自己的用例，这是很明显的，但是您可以对-999到999之间的整数执行此操作

.currency:before{content:'$'；}
.currency:在{content:'.00'；}之后

---

789

var编号=25153.3；
log（number.toLocaleString（））
/------
var编号=25153.3；
result=“$”+number.toLocalString（未定义，{minimumFractionDigits:2，maximumFractionDigits:2}）
控制台日志（结果）；
console.log（）；
//---------------------------------------------------
//请求货币格式
log（number.tolocalString（'us-us'，{style:'currency'，currency:'USD'}））；
// → $ 251,52.30 
log（number.tolocalString（'de-de'，{style:'currency'，currency:'EUR'}））；
// → 25.152,30 €
//日元不使用小单位
log（number.tolocalString（'ja-JP'，{style:'currency'，currency:'JPY'}））
// → 251,53元
no。不使用纯css。可能重复“这不是css设计的目的”。。。我会保留对CSS设计目的的判断。将通用功能推入浏览器正是CSS等技术的设计目的。曾经有一段时间，“响应屏幕大小”并不是“CSS设计的目的”，而且：啊哈-这就是XSLT设计的目的；-）“格式化一个数字”是一种表示功能，这正是CSS设计的目的。不能影响中间千个separator，但数字前后足以达到目标…document.queryselectoral（.currency”）.forEach（e=>{n=number（e.innerHTML）.toFixed（2）；if（！isNaN（n））e.innerHTML=n.tolocalString（）；}）；这是javascript而不是css。但它是一个更好的解决方案。不，它不是，因为它没有提供OP要求的好主意。但这不是正确的解决方案。因为如果你的整数增加到100000，你就不会有comma@GarthBaker嗯，我不明白为什么会这样，因为它在第二个代码段中使用6位和9位数字。我误解你了吗？虽然我可以很容易地理解人们不喜欢这个解决方案，因为我讨厌它，也不会使用它，但逻辑上对数字组进行分组以进行格式化对于目标来说是相当有意义的。我不太清楚你在说什么。制作这样一个数字是荒谬的，没有人会经历这样一个荒谬的过程。因为小数是用css设置的，所以有出错的余地。这是一个令人沮丧的解决方案。CSS不是这个问题的正确解决方案。嗯，不是每个问题实例的正确解决方案，但在某些情况下它是理想的解决方案。根据room for error，您正在跳过逻辑中的某些步骤。将一个
1234567890
转换为该值是很简单的，错误几率为0。虽然你变得更具侵略性而不是纠正错误，这很有意思
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template match="span[@class='dollars']">
        <span>
            <xsl:text>$</xsl:text>
            <xsl:value-of select="format-number(current(), '###,###.00')"/>
        </span>
    </xsl:template>

    <xsl:template match="@* | node()">
        <xsl:copy>
            <xsl:apply-templates select="@* | node()"/>
        </xsl:copy>
    </xsl:template>
</xsl:stylesheet>

Number(value).toLocaleString('en');

.enMoney::before {
    content:"$";
}
.negMoney {
    color:red;
}