js动态创建元素,并控制元素样式

js动态创建元素,并控制元素样式js动态创建元素,并控制元素样式

大家好,又见面了,我是你们的朋友全栈君。

 <!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>
    <style>
        * {
            padding:30px;
        }
    </style>
</head>
<body>
    <div id="oo">
            <!-- <div><i>语</i><span></span></div>
            <div><i>语</i><span></span></div>
            <div><i>语</i><span></span></div> -->
    </div>

    <script>

        var kemu = [
            {ke:'数',name:'数学'},
            {ke:'语',name:'语文'},
            {ke:'英',name:'英语'}
        ]
        new function () {
        kemu.forEach(function (item,index) {
            var div = document.createElement('div');
                div.innerHTML += `<i>${item.ke}</i><span>${item.name}</span>`;
                oo.appendChild(div);
                function changeColor (x,y,z) {
                    switch (index) {
                    case 0 : 
                    (x.childNodes[0].style.color = 'red',
                    x.childNodes[1].style.backgroundColor = 'red');  break;
                    case 1 : 
                    (y.childNodes[0].style.color = 'blue',
                    y.childNodes[1].style.backgroundColor = 'blue');  break;
                    case 2 : 
                    (z.childNodes[0].style.color = 'green',
                    z.childNodes[1].style.backgroundColor = 'green');  break;
                }
                }
                changeColor(oo.childNodes[3],oo.childNodes[4],oo.childNodes[5]);
        });
        
        }

    </script>
</body>
</html>

复制代码
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/107349.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Linux下更改文件权限[通俗易懂]

    Linux下更改文件权限[通俗易懂]目录查看文件权限修改文件权限查看文件权限查看文件权限可以通过ls-l命令查看,如下所示:如果只想查看某一个文件的权限,可以使用grep,如下所示:可以发现,每一个文件的第一个字段都是由r、w、x等10个字符构成,这10个字符所组成的字符串反映了文件的权限。在linux下,文件权限分为三种:可读权限(read)、可写权限(write)以及可执行权限(execut…

    2022年7月26日
  • css 去色_css按钮点击改变颜色

    css 去色_css按钮点击改变颜色有这么一个样式,可以在你实现无色和加色之间游刃有余。网站设计师在设计网页时,有时将一块图片设计成灰色,鼠标移上去,图片就有颜色。一般的逻辑是做两张图片,然后在鼠标上做图片切换事件。当然这种方法可以完美是实现, 不过有个小瑕疵,就是你要切一倍的图片(有色+无色)。下面介绍样式实现,可以减少一倍量的工作哦。//HTMLCSS.grayscaleimg{filter:g

    2022年10月6日
  • 腾讯股票数据接口

     0:未知 1:名字:name 2:代码:code 3:现价:trade 4:昨收:yestclose 5:今开:open 6:成交量(手):volume 7:外盘 8:内盘 9:买一10:买一量(手)11-18:买二买五19:卖一20:卖一量21-28:卖二卖五29:最近逐笔成交30:时间31:涨跌:change32:涨跌幅:changepercent33:最高:high34:最低:low3…

    2022年4月8日
  • system.Exception:端口已被占用1080「建议收藏」

    system.Exception:端口已被占用1080「建议收藏」找出是哪个程序占用了1080端口打开cmd.exe,输入命令:netstat-aon|findstr"1080"1最后一列就是PID了,我的是3104. 要想知道此PID对应什么程序,可以继续输入:tasklist|findstr"4568"1打开任务管理器,在进程里面找下wpscloudsvr.exe,或者在服务里面找PID为3104。…

    2022年9月7日
  • hadoop调优方法(和也篇)

    前言本文隶属于专栏《1000个问题搞定大数据技术体系》,该专栏为笔者原创,引用请注明来源,不足和错误之处请在评论区帮忙指出,谢谢!本专栏目录结构和参考文献请见1000个问题搞定大数据技术体系正文RM的内存资源配置,配置的是资源调度相关ID配置说明RM1yarn.scheduler.minimum-allocation-mb分配给AM单个容器可申请的最小内存RM2yarn.scheduler.maximum-allocation-mb分配给AM单个容器可申请

    2022年4月12日
  • Java虚拟机学习 – 垃圾收集器 (4)

    Java虚拟机学习 – 垃圾收集器 (4)

    2022年3月1日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号