web-dev-qa-db-fra.com

Formater un nombre en devise à l'aide de CSS

Il suffit de se demander si quelqu'un sait s'il est possible de formater le contenu d'un élément en tant que devise en utilisant uniquement CSS. Ce serait bien d'avoir la façon dont la valeur est présentée en CSS si possible, je ne trouve rien, alors je ne retiens pas mon souffle :)

<!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>

Cet exemple est le suivant:

Pure CSS: 25153.3 $

Format idéal: 25 153,30 $

De plus, je suis conscient du fait que javascript est assez simple - http://css-tricks.com/snippets/javascript/format-currency/ .

htmlcssformat
29
Daniel Imms

Le format monétaire peut être obtenu avec CSS et un peu de Javascript qui est nécessaire pour l’analyse du nombre afin d’ajouter les virgules. Une classe CSS ajoute le style supplémentaire tel que le signe négatif (rouge) ou le symbole monétaire (par exemple, le signe $ dollar). L'approche est la suivante:

1) Convertissez la valeur en nombre (ajoute les virgules en fonction des paramètres régionaux) 

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

2) Ajouter une classe pour déterminer s’il s’agit d’une valeur négative ou positive (c’est-à-dire de couleur rouge)

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

Voir plus de détails ici avec l'exemple de code et css:

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

17
ozkary

Si vous vous interrogez sur le formatage de nombres en CSS (c’est-à-dire analyser un nombre d’une chaîne puis le mettre en forme avec un séparateur de milliers, un séparateur décimal, un nombre décimal fixe, etc.) pas ce que CSS a été conçu pour.

Si vous souhaitez effectuer un formatage, vous feriez mieux d'utiliser XSLT. Par exemple:

<?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>
3
penartur

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

0
Timothy Nwanwene