Menu
Just wondering if anyone knows whether it is possible to format the content of an element as currency using only CSS. It would be nice to have how the value is presented in CSS if possible, can't find anything though so I'm not holding my breath :)
<!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> That example comes out as:
Pure CSS: $25153.3
Ideal format: $25,153.30
Also I'm aware that it's fairly trivial using javascript - http://css-tricks.com/snippets/javascript/format-currency/.
817
NumberFormat() Method. One of the best ways in JavaScript to format the number as a currency string is to use Intl. NumberFormat() method. You can pass the locale to the method as a parameter and set the dollar sign before the number and format number.
When you apply the Currency format to a number, the currency symbol appears right next to the first digit in the cell. You can specify the number of decimal places that you want to use, whether you want to use a thousands separator, and how you want to display negative numbers.
Just type <del>र</del> in your web page.
The currency format can be achieved with CSS and a bit of Javascript which is needed for the parsing of the number to add the commas. A CSS class adds the additional styling like negative (red) or currency sign (i.e. $ Dollar sign). The approach is a follows:
1) Convert the value to number (adds the commas based on the locale)
Number(value).toLocaleString('en'); 2) Add a class to determine if it is negative or positive value (i.e. red color)
.enMoney::before { content:"$"; } .negMoney { color:red; } See more detail here with the sample code and css:
http://www.ozkary.com/2014/04/format-currency-with-javascript-and-css.html
70
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,53If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
