Dszmz 2021-04-23 10:13 采纳率: 100%
浏览 99
已结题

js能通过数组实现 字逐行显示 并且每行字体大小不一样 颜色不一样吗？ 已经做到颜色 和字体逐行显示

js能通过数组实现 字逐行显示 并且每行字体大小不一样 颜色不一样吗？ 已经做到颜色 和字体逐行显示了 但是每行字体大小不一样做不到了 求解答！！！
  • 写回答

3条回答 默认 最新

  • wanmeikakaxi 2021-04-23 22:22
    关注

    为什么没有效果？
    原因是font 标签中的 size 最大值为7，且不支持设置px属性，只需填入单纯数值就行了。
    再说了，html中已经不赞成使用font size，因为有局限性，建议采用style形式设置效果。

    把字体的数组
     zz=["20px","40px","60px","80px"];
    改成以下即可
    zz=["2","4","6","7"];


    如果你想设置更多大小效果，建议改成style内联方式
    zz数组不变
     zz=["20px","40px","60px","80px"];
    然后
    document.getElementById('p1').innerHTML+="<font color="+cc[i]+" size="+zz[i]+">"+xs[i]+"</font><br>";
    则修改如下
    document.getElementById('p1').innerHTML+="<span style='color:"+cc[i]+";font-size:"+zz[i]+";'>"+xs[i]+"</span><br>";

     

    font标签版

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p id="p1"></p>
</body>
    <script>
        var xs=["123","456","789","666"];
        var zz=["2","4","6","7"];
        var cc=["red","blue","pink","green"];
        i=0;
        function wz(){
           document.getElementById('p1').innerHTML+="<font color="+cc[i]+" size="+zz[i]+">"+xs[i]+"</font><br>";
            // document.getElementById('p1').style.fontSize=zz[i];
            i++;
            if(i>xs.length){
            i=0;
            document.getElementById('p1').innerHTML="";
            }
           setTimeout("wz()",500);
        }
		wz();
    </script>
</html>

    style版

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p id="p1"></p>
</body>
    <script>
        var xs=["123","456","789","666"];
        var zz=["20px","40px","60px","80px"];
        var cc=["red","blue","pink","green"];
        i=0;
        function wz(){
           document.getElementById('p1').innerHTML+="<span style='color:"+cc[i]+";font-size:"+zz[i]+";'>"+xs[i]+"</span><br>";
            // document.getElementById('p1').style.fontSize=zz[i];
            i++;
            if(i>xs.length){
            i=0;
            document.getElementById('p1').innerHTML="";
            }
           setTimeout("wz()",500);
        }
		wz();
    </script>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 11月26日

悬赏问题

  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题，上传的坐标文件里是怎么对无序点进行编号的，以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 CSAPPattacklab
  • ¥15 一直显示正在等待HID—ISP
  • ¥15 Python turtle 画图
  • ¥15 关于大棚监测的pcb板设计
  • ¥15 stm32开发clion时遇到的编译问题
  • ¥15 lna设计 源简并电感型共源放大器
  • ¥15 如何用Labview在myRIO上做LCD显示？(语言-开发语言)
  • ¥15 Vue3地图和异步函数使用
  • ¥15 C++ yoloV5改写遇到的问题