How to format a number as currency using CSS ?

Given a number and the task is to format the number of an HTML element as currency using CSS and a little bit of JavaScript. It is not possible to complete the task with pure CSS. A bit of JavaScript is needed for the parsing of the number to add the commas.

Approach: In the code, the CSS class currSign adds the currency sign (like ‘$’) before the number. The JavaScript function toLocaleString() returns a string with a language-sensitive representation of the number. 

Example:

html

<style>
    .currSign:before {
        content: '$';
    }
</style>

<!-- Some unformatted numbers -->
<div class="myDIV">88123.45</div>
<div class="myDIV">75123.45</div>
<div class="myDIV">789415123.45</div>
<div class="myDIV">123</div>

<!-- Javascript code to format the
    number as per the locale -->
<script>
    let x = document.querySelectorAll(".myDIV");
    for (let i = 0, len = x.length; i < len; i++) {
        let num = Number(x[i].innerHTML)
                .toLocaleString('en');
        x[i].innerHTML = num;
        x[i].classList.add("currSign");
    }
</script>

Output:

My Personal Notes arrow_drop_up

Save