格式编号价格样式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

你可以这样做在CSS中，并不难

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

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

Answer 3

试试这个：

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 4

你可以使用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>