web-dev-qa-db-ja.com

CSSを使用して数値を通貨としてフォーマットする

CSSのみを使用して要素のコンテンツを通貨としてフォーマットすることが可能かどうかを誰かが知っているのかどうか疑問に思っています。可能であれば、CSSで値がどのように表示されるかがあればいいのですが、何も見つからないので息を止めていません:)

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .dollars:before { content:'$'; }
    </style>
</head>
<body>
    Pure CSS: <span class="dollars">25153.3</span>
    <br />
    Ideal format: <span>$25,153.30</span>
</body>
</html>

その例は次のようになります。

純粋なCSS：$ 25153.3

理想的な形式：$ 25,153.30

また、javascript - http://css-tricks.com/snippets/javascript/format-currency/ を使用すると、かなり簡単なこともわかっています。

htmlcssformat
30
Daniel Imms

通貨形式は、CSSと、数値を解析してコンマを追加するために必要なJavascriptを少し使用して実現できます。 CSSクラスは、マイナス（赤）や通貨記号（$ドル記号）などの追加のスタイルを追加します。アプローチは次のとおりです。

1）値を数値に変換します（ロケールに基づいてコンマを追加します）

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

2）クラスを追加して、それが負の値であるか正の値であるかを判断します（つまり、赤色）

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

サンプルコードとcssで詳細を確認してください。

http://www.ozkary.com/2014/04/format-currency-with-javascript-and-css.html

19
ozkary

var number = 25153.3; console.log(number.toLocaleString());/- - - 

var number = 25153.3;
result="$ " + number.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})
console.log(result);

console.log();
//---------------------------------------------------

// request a currency format
console.log(number.toLocaleString('us-US', { style: 'currency', currency: 'USD' }));
// → $ 251,52.30 

console.log(number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
// → 25.152,30 €

// the Japanese yen doesn't use a minor unit
console.log(number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }))
// → ￥251,53
1
Timothy Nwanwene

CSSで数値の書式設定（つまり、文字列から数値を解析し、3桁ごとの区切り記号、小数点記号、固定小数点桁数などで書式設定する）について質問している場合、いいえ、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>
0
penartur