使用CSS将数字格式化为货币 [英] Formatting a number as currency using CSS

查看:1595
本文介绍了使用CSS将数字格式化为货币的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

只是想知道是否有人知道是否可以使用CSS仅将元素的内容格式化为货币。如果可能的话,如何在CSS中显示这个值是很好的,但是我找不到任何东西,所以我不能保持呼吸:)

 <!DOCTYPE html> 
< html>
< head>
< style type =text / css>
.dollars:before {content:'$'; }
< / style>
< / head>
< body>
纯CSS:< span class =dollars> 25153.3< / span>
< br />
理想格式:< span> $ 25,153.30< / span>
< / body>
< / html>

这个例子是:



纯CSS:$ 25153.3



理想格式:$ 25,153.30 p>另外,我知道这是非常微不足道的使用javascript - http://css-tricks.com/snippets / javascript / format-currency /

解决方案

货币格式可以使用CSS和一些Javascript这是解析数字以添加逗号所需要的。 CSS类添加附加样式,如负(红色)或货币符号(即$美元符号)。方法如下:



1)将值转换为数字(根据区域设置添加逗号)

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

2)添加一个类以确定它是负值还是正值(即红色) p>

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

使用示例代码和css查看更多细节:



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


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/.

解决方案

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

这篇关于使用CSS将数字格式化为货币的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆