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

回答1:

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

回答2:

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);

回答3:

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>

回答4:

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

回答5:

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);

回答6:

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

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

回答7:

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

回答8:

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