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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 无人机数车–Drone-based Object Counting by Spatially Regularized Regional Proposal Network[通俗易懂]

    无人机数车–Drone-based Object Counting by Spatially Regularized Regional Proposal Network[通俗易懂]Drone-basedObjectCountingbySpatiallyRegularizedRegionalProposalNetworkICCV2017数据库:https://lafi.github.io/LPN/本文主要使用CNN网络处理无人机拍摄的视频,同时完成对图像中的车辆检测和计数,新建了一个用无人机拍摄停车场的数据库CARPK,含有近9万辆车下面是一个示意

    2022年8月15日
  • ASCII码表查询

    ASCII码表查询ASCII码表查询

    2022年4月24日
  • k8s的apiserver_kube_apiserver

    k8s的apiserver_kube_apiserverAPIserverfunc main() { … #核心 command := app.NewAPIServerCommand() #日志 logs.InitLogs() defer logs.FlushLogs() …}#NewAPIServerCommand#核心是调用run函数 运行AIPserver 永远不会退出return Run(completedOptions, genericapiserver.SetupSignalHandler())#Run#创建

    2022年8月9日
  • DSP优化——C6000[通俗易懂]

    DSP优化——C6000[通俗易懂]第一章C6000系列DSP的体系结构简介TI的C6000系列DSP内部采用的哈佛结构的体系结构,其数据段和代码段是分开存放的并且独立编址,减轻了程序在运行时的访问存储数据的瓶颈。其中C62和C64系列均为定点的DSP处理器,而C67系列为浮点的DSP,本文主要介绍C64系列的优化方法。C6455的功能模块图如下:图1:c6455的功能方框图C64系列DSP有两个数据通道,如下

    2022年6月16日
  • Laravel 5框架Mutator,Scope

    Laravel 5框架Mutator,Scope首先修改控制器:publicfunctionstore(){Article::create(Request::all());returnredirect(‘articles’);}然后修改视图,添…

    2022年9月12日
  • 2021-08-16 WPF控件专题 WrapPanel 控件详解

    2021-08-16 WPF控件专题 WrapPanel 控件详解1.WrapPanel控件介绍流面板子元素按顺序排列,如果按水平方向:从左到右,超出部分,自动换行到下一行垂直从上到下,下一列排列方向:OrientationItemWidthItemHeight调整面板的尺寸时,内部子元素的布局–自动调整弥补StackPanel的不足StackPanel与WrapPanel结合使用2.具体案例<BorderBorderBrush=”Red”BorderT.

    2022年7月23日

发表回复

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

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