Question

我正在使用Opencart电子商务网站，我需要自定义产品价格字体大小，例如： product price: $ 250.50我需要设置$ = 16px; 250 = 22px; .50 = 14px;的字体大小如何为单个数量设置不同的字体大小.. ???

这是我的动态PHP代码，它将价格文本显示在我的产品页面中：

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

我的产品列表页面不是一个有价格的产品，有很多带有价目表的产品。

感谢您的帮助，如果有人在此之前提出同样的问题，请与我分享链接......

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

Answer 2

试试此代码

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

Answer 3

这是一个快速而肮脏的例子：

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

Answer 4

可以用一点css和正则表达式完美地完成。见fiddle

HTML：

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

css：

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

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

完成

Answer 5

试试这个

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

Answer 6

最简单的方法是分割那个var？看看php函数explode()。

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

Answer 7

您可以尝试这种通用方法

$('.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

Answer 8

对这三个不同的段使用不同的span元素，并为它们分别设置类以指定不同的字体样式。基本上跨距是内联元素，因此您不必担心它的位置。

例如：

渲染后你的标记应该是这样的，

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

然后在CSS中：

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

Answer 9

仅使用split（）的一种可能的简单动态方式。

这将在具有类<small>的每个元素上的format标记中包装小数。

document.querySelectorAll(".format").forEach((e) => {
  let txt = e.innerHTML.split(".")
  e.innerHTML = txt[0] + ".<small>" + txt[1] + "</small>"
})

.format {font-size:3rem}
small {font-size:1.4rem}

<div class="format">34454.545432</div>
<div class="format">0.0000463533</div>
<div class="format"><mark>Hello</mark> -8765.9876</div>

更改小数点后的字体大小

9 个答案: