您的位置:首页 > Web前端 > JQuery

css和jQuery ,字符串中重新定义单个字符样式背景

2015-12-25 11:05 691 查看
<table class="tb2">
<tr><td class="td1">融资登记企业<span>985</span>个</td><td class="td2">融资项目数量<span>985</span>个</td><td class="td3">融资需求金额<span>985</span>万元</td></tr>
<tr><td>完成融资企业<span>00008</span>个</td><td>完成融资数量<span>985</span>个</td><td>完成融资金额<span>985</span>万元</td></tr>
</table>


背景图



.tb2 td span i{background:url(../images/numbg.png) no-repeat 0px 0;

display:inline-block;
font-size:20px;color:#ff0000;font-weight:bold;font-family:Arial;line-height:30px;display:inline-block;height:28px;width:27px;text-align:center;font-style:normal}


$(".tb2 td span").each(function () {//遍历每个span元素
var str = $(this).text();
var arr = str.match(/./g); //将元素中的单个字符组成数组
var str2 = "";
for (var i = 0; i < arr.length; i++) {
str2 += arr[i].replace(arr[i], "<i>" + arr[i] + "<\/i>"); //将数组元素替换,并且带有i标签
}
$(this).html(str2); //对当前元素进行新的赋值,例如将数字985替换为<i>9</i><i>8</i><i>5</i>的格式
});


最终效果



如果用背景平铺和letter-spacing,是达不到这种效果的,数字的前面和后面部分都会有一小段出现
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: