change font size after decimal point

i am working with a Opencart eCommerce website, i need to customize product price font size, for example: product price: $ 250.50 i need to set font size for $ = 16px; 250 = 22px; .50 = 14px; how can i set different font size for a single amount..???

this s my dynamic php code that display price text to my product page:

<span class="price"><?php echo $product['price']; ?></span>

my product list page not a single product with price, there is a lots of product with price list.

thanks for any help, if anybody asked same question before here, please share with me that links...

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

http://jsfiddle.net/gr8x5/10/

Try this code

var pri = $(".price").text();
var sig = pri.split(" ");
var dol_smbl = "<span style='font-size:16px;'>" + sig[0] + "</span>";
var digits = sig[1].split(".");
befr_dec = "<span style='font-size:22px;'>" + digits[0] + "</span>";
aftr_dec = "<span style='font-size:14px;'>." + digits[1] + "</span>";
$(".price").html(dol_smbl + " " + befr_dec + aftr_dec);

Here's a quick and dirty example:

<html>
<head>
    <style>
        .dollar_sign { font-size: 16px; }
        .dollars { font-size: 22px; }
        .cents { font-size: 14px; }
    </style>
</head>
<body>
<?
    $product = array('price' => '245.50');
    $part    = explode('.', $product['price']);
?>
    <span class="dollar_sign">$</span><span class="dollars"><?= $part[0] ?></span>.<span class="cents"><?= $part[1] ?></span>   
</body>
</html>

Can be beautifully done with a little css and regex. See this fiddle

the HTML :

<span class="price">$250.50</span>

the css :

.currency { font-size:16px; }
.number { font-size:22px; }
.decimal { font-size:14px; }

the javascript :

 var price = $('span.price').text();  
    var pArry = price.match(/^(\$)(\d+)(\.\d+)?/);    
    var new_span = $(
        '<span class="currency">' + pArry[1] + '</span>' +
        '<span class="number">' + pArry[2] + '</span>' +
        '<span class="decimal">' + pArry[3] + '</span>');
    $('span.price').replaceWith(new_span);

Done

Try like this

var my_price = $(".price").text();
var dol_smbl = "<span style='font-size:16px;'>"+my_price[0]+"</span>";
var price = split(" ",my_price);
var price_arr = split('.',price[1]);
befr_dec = "<span style='font-size:22px;'>"+price_arr[0]+"</span>";
aftr_dec = "<span style='font-size:14px;'>."+price_arr[1]+"</span>";
$(".price").html(dol_smbl + " " + befr_dec  + aftr_dec);

The easiest way would be to split up that var? Look at the php function explode().

http://php.net/manual/de/function.explode.php

You can try this generic approach

$('.price').each(function () {
    var $this = $(this),
        txt = $this.text(),
        splt = txt.split('.'),
        spltFirst = splt.pop(),
        spn3 = $('<span/>', {
            text: spltFirst,
                'class': 'font-small'
        }),
        spltSecond = splt.pop(),
        spn1 = $('<span/>', {
            text: spltSecond.substring(0, spltSecond.lastIndexOf('$') + 1),
                'class': 'font-medium'
        }),
        spn2 = $('<span/>', {
            text: spltSecond.substring(spltSecond.lastIndexOf('$') + 1) + '.',
                'class': 'font-big'
        });
    $this.text('');
    $this.append(spn1).append(spn2).append(spn3);
});

Check Fiddle

Use different span element for those three different segments and set class for them individually to assign different font styles. Basically spans are inline element, so you dont need to worry about its placement.

For example:

After rendering your markup should be like this,

<span class="price">
    <span class="currencySymbol">$</span>
    <span class="amt1">250</span>
    <span class="amt2">.50</span>
</span>

then in CSS:

.currencySymbol{ font-size:16px; } 
.amt1{ font-size:22px; } 
.amt2{ font-size:14px; }

来源：https://stackoverflow.com/questions/17162945/change-font-size-after-decimal-point

标签

javascript

jquery

html

css

opencart