我正在使用Opencart电子商务网站,我需要自定义产品价格字体大小,
例如:
product price: $ 250.50
我需要设置$ = 16px;
250 = 22px;
.50 = 14px;
的字体大小
如何为单个数量设置不同的字体大小.. ???
这是我的动态PHP代码,它将价格文本显示在我的产品页面中:
<span class="price"><?php echo $product['price']; ?></span>
我的产品列表页面不是一个有价格的产品,有很多带有价目表的产品。
感谢您的帮助,如果有人在此之前提出同样的问题,请与我分享链接......
答案 0 :(得分:5)
$.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>'));
});
答案 1 :(得分: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);
答案 2 :(得分:2)
这是一个快速而肮脏的例子:
<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 :(得分:2)
可以用一点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);
完成
答案 4 :(得分: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);
答案 5 :(得分:1)
最简单的方法是分割那个var?看看php函数explode()
。
答案 6 :(得分: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);
});
<强> Check Fiddle 强>
答案 7 :(得分:0)
对这三个不同的段使用不同的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; }
答案 8 :(得分:0)
仅使用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>