Dado un número, la tarea es formatear el número de un elemento HTML como moneda usando CSS y un poco de JavaScript. No es posible completar la tarea con CSS puro. Se necesita un poco de JavaScript para analizar el número para agregar las comas.
Enfoque: en el código, la clase CSS currSignagrega el signo de moneda (como ‘$’) antes del número. La función de JavaScript toLocaleString()devuelve una string con una representación sensible al idioma del número.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<!-- CSS style to add the sign of the
currency before the number -->
<style>
.currSign:before {
content: '$';
}
</style>
</head>
<body>
<!-- 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>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sibasish_14 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA