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: In this example, we are using the above-explained approach.
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:Â
