Js原声绑定事件，获取值，设css样练习

最新推荐文章于 2023-06-27 21:16:48 发布

qq_42464346

最新推荐文章于 2023-06-27 21:16:48 发布

阅读量331

点赞数

本文链接：https://blog.csdn.net/qq_42464346/article/details/82804799

版权

<!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>
        ul{
            width: 180px;
            height: 200px;
            background: #ccc;
            margin: 0 auto;
        }
        li{
            list-style: none;
            width: 120px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            
            margin-bottom: 20px;
            cursor: pointer;
        }
        li:first-child{
            background: #00c8c8;
        }
        li:nth-child(2){
            background: skyblue
        }
        li:nth-child(3){
            background: yellow
        }
        li:last-child{
            background: pink
        }
    </style>
</head>
<body>
    <div id="box">
        <ul id="ul">
            <li>测试一</li>
            <li>测试二</li>
            <li>测试三</li>
            <li>测试四</li>
        </ul> 
    </div>
    <button onclick="hide()">点我</button>
    <button onclick="show()">点我</button>
    <script>
        function hide(){//点击更换颜色
            var a=document.getElementById("ul")
            var b=a.style.background="blue"
        }

        function show(){//点击更换颜色
            var a=document.getElementById("ul")
            var b=a.style.background="pink"
        }

        var ele=document.createElement("div")
        //设置id
        ele.setAttribute("id","add")
        //设置颜色
        ele.style.background="yellow"
        //设置宽高
        ele.style.width="200px"
        ele.style.height="200px"
        var box=document.getElementById("box")
        //添加元素
        box.appendChild(ele)
        
        var ul = document.getElementById('ul');
        var li=ul.getElementsByTagName("li")    
        for(var i = 0;i<li.length;i++){
            li[i].onclick=function(){
                //获取当前点击事件的内容
            console.log(this.innerHTML)
           }
        }
    </script>
</body>
</html>