2020-11-2-作业

最新推荐文章于 2020-11-25 21:14:29 发布

wui0215

最新推荐文章于 2020-11-25 21:14:29 发布

阅读量111

点赞数

本文链接：https://blog.csdn.net/wui0215/article/details/109529278

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .a{
        color:red;
    }
    .b{
        color:blue;   
    }
</style>
<body>
    <ul id="books">
        <li id="">java</li>
        <li>js</li>
    </ul>
    <input type="text" id="bookName"/>
    选择颜色：<button id="red" onclick="redColor()">red</button>
    <button id="blue" onclick="blueColor()">blue</button>
    <button id="add" onclick="addBook()">+</button>
    <button id="del">-</button>
    <script>
        const books=document.querySelector("#books")
        const bookName=document.querySelector("#bookName")
        const add=document.querySelector("#add")
        const del=document.querySelector("#del")
        var i=0;//判断点击的按钮
        const redColor=()=>{
            i=1;
        }
        const blueColor=()=>{
            i=2;
        }
        const addBook=()=>{
            const oElement=document.createElement('li')//创建标签
            oElement.className=`lis+${i}`;//给新添加的设置class
            const oText=document.createTextNode(bookName.value)//创建文本
            oElement.appendChild(oText)//向元素添加子元素
            books.appendChild(oElement)
            bookName.value=""
            if(i==1){
                var a=document.getElementsByClassName(`lis+${i}`);//查找class
                a[0].className="a";//设置属性

            }
            if(i==2){
                var b=document.getElementsByClassName(`lis+${i}`);
                b[0].className="b";
            }
        }
        const delbook=()=>{
            books.removeChild(books.lastElementChild)
        }
        add.addEventListener("click",addBook)
        del.addEventListener("click",delbook)
    </script>
</body>
</html>

wui0215

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2020-11-2-作业

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width, initial-scale=1.0"> <title>Document</title></head><style> .a{ color:red;
复制链接

扫一扫