js和jquery实现金额整数和小数点的大小样式

最新推荐文章于 2025-01-31 14:25:53 发布

Luckly-huang

最新推荐文章于 2025-01-31 14:25:53 发布

阅读量2.2k

点赞数 2

分类专栏： css 文章标签： js juery

本文链接：https://blog.youkuaiyun.com/weixin_44122498/article/details/99692166

版权

css 专栏收录该内容

2 篇文章

订阅专栏

标题：金额小数点后的数字大小样式

首先第一步html部分先有个p标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #sum sup{
            font-size:16px ;
        }
    </style>
</head>
<body>
    <p id="sum" style="font-size: 28px;">88.2</p>
</body>

</html>

接着用js或jQuery把p标签里面的文本内容用split切割成数组,得到数组是**[88,2]**,接着把它设置到页面中去，用字符串拼接起来，具体完整内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #sum sup{
            font-size:16px ;
        }
    </style>
</head>
<body>
    <p id="sum" style="font-size: 28px;">88.2</p>
</body>
<script src="jquery.js"></script>
<script type="text/javascript">
    // <!--jq方法-->
    $(function(){
        var wb = $("#sum").text()

//这里会得到切割数组
        var fg = wb.split(".")

        var fgOne = fg[0]    //88

             fgTwo = fg[1]      //2
      //  获取到p标签，用html()方法动态拼接页面内容，这样就得到结果了
        $('#sum').html(fgOne + "." +  "<sup>" +  fgTwo + "</sup>")
    })
    /*js方法*/
     // window.onload = function() {
     //     var wb = document.getElementById('sum')
     //     console.log('wb',wb)
     //      wbText = wb.innerText;
     //
     //    text =  wbText.split('.')
     //
     //     wtOne = text[0]
     //
     //     wtTwo = text[1]
     //
     //     wb.innerHTML = wtOne + "." + "<sup>" + wtTwo + "</sup>"
     // }
</script>
</html>

![页面显示结果(https://img-blog.csdnimg.cn/20190817135407971.PNG)]