使用js格式化數字樣式樣式

Question

我希望格式化逗號之后的數字價格，字體較小：

例如，我有這個范圍：

<span class="price">9,95€</span>

我需要更換以下內容：

<span class="price">9,<span class="small-price">95€</span></span>

我怎么能用javascript，php或css做到這一點？

Answer 1

請在下面的代碼中找到我們可以使用regex執行此操作。

 $.each($('.price'), function() { var price = $(this).html(); $(this).html(price.replace(/(\\d*\\,)(\\d*)(\\D*)/, '<span style="font-size:22px;">$1</span><span style="font-size:16px;">$2</span><span style="font-size:14px;">$3</span>')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='price'>270,30€</div> 

Answer 2

嘗試這個：

 var prices = document.getElementsByClassName('price'); for (var i = 0; i < prices.length; i++) { var priceEl = prices[i]; var price = priceEl.innerHTML; var priceParts = price.split(','); var smallPriceValue = priceParts[1]; if (smallPriceValue) { var span = document.createElement('span'); span.className = "small-price"; span.innerHTML = smallPriceValue; priceEl.innerHTML = priceParts[0]+ ","; priceEl.appendChild(span); } } 

 .price { font-size: 18px; } .small-price { font-size: 12px; } 

 <span class="price">9,95€</span><br> <span class="price">12,85€</span> 

Answer 3

您可以使用document.getElementsByClassName並使用純Javascript更改元素。

 [].forEach.call(document.getElementsByClassName('price'), function (a) { a.innerHTML = a.innerHTML.replace(/(\\d\\d€)/, '<span class="small-price">$1</span>'); }); 

 .price { font-size: 36px; } .small-price { font-size: 24px; } 

 <span class="price">9,95€</span><br> <span class="price">0,01€</span> 

Answer 4

你可以在CSS中做到這一點，而不是那么困難

 .small-price { font-size: 7pt; } 

 5,<font class="small-price">95</font>