logo标签列表

在小数点后更改字体大小

javascriptjqueryhtmlcssopencart
5

我正在处理一个Opencart电子商务网站，我需要自定义商品价格字体大小，例如：商品价格：$ 250.50，我需要设置字体大小为$ = 16px;250 = 22px;.50 = 14px;

我怎样才能为单个金额设置不同的字体大小呢？

这是我的动态PHP代码，用于在我的产品页面上显示价格文本：

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

我的产品列表页面上没有单个产品的价格，有许多带有价格列表的产品。

感谢任何帮助，如果有人之前在这里问过同样的问题，请与我分享那些链接...

9个回答
8
$.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/

谢谢您的回答，对于单个产品它是有效的...但是当我尝试在同一页上列出多个产品时，第一个产品的价格会重复出现在所有其他产品的价格中...您能否检查一下您的示例吗？ - mans
@kuraiinazuma...感谢您，现在已经可以工作了...还有一个问题，我的网站有两种货币，美元$和科威特第纳尔KD，我该如何设置这个代码来支持这两种货币呢？您上面的答案只适用于美元$...有什么想法吗？谢谢。 - mans
优秀的代码。您还可以使其动态：'$1$2<span style="font-size: smaller;">$3</span>'（或使用 70% 左右）。 - KoalaBear
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>
3

试试这段代码

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

只需使用少量的 CSS 和正则表达式就可以实现美观的效果。请参阅此示例

HTML 代码如下：

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

样式表：

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

完成。
1
尝试像这样。
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);
1
你可以尝试这种通用方法。
$('.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);
});

检查 Fiddle

1
0
使用不同的span元素来处理这三个不同的段落，并为它们分别设置类以分配不同的字体样式。基本上，spans是内联元素，所以您不需要担心它的位置。
例如：
渲染后，您的标记应该像这样：
<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; }
它不是静态文本，而是动态生成的价格文本…请看我的问题。 - mans
@mans，我对PHP没有什么想法，你可以编写PHP代码来呈现你所给出的HTML。我认为在你的情况下这会更加简洁。 - Rajaprabhu Aravindasamy
0
可能的简单动态方法只使用split()。
这将在每个具有类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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接