简单的座位选择

最新推荐文章于 2024-09-14 18:52:56 发布

嘻嘻哈哈571

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量111

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_74809131/article/details/128174576

版权

点击前

点击后

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            width: 650px;
            height: 600px;
            border: 1px solid black;
            border-radius: 10px;
            margin: 0 auto;
        }

        li {
            margin: 10px;
            width: 100px;
            height: 50px;
            float: left;
            list-style: none;
            background-color: bisque;
        }

        div {
            width: 400px;
            height: 100px;
            margin: 400px 100px;
            text-align: center;
            line-height: 100px;
            border: 1px solid black;
        }

        .click {
            font-size: 10px;
            text-align: center;
            line-height: 50px;
            font-family: '仿宋';
            font-weight: bold;
            color: #333;
            background: rgb(79, 161, 54);
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <div style="clear: both">屏幕中央</div><!-- clear:both 无视之前的浮动效果 -->
    </ul>
</body>
<script>
    var lis = document.getElementsByTagName('li');//获取li元素
    // 点击的循环 for (var i = 0; i < 对象.length; i++) { lis[i].onclick = function () {}}

    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            var res = this.getAttribute('class');//判断属性是否存在
            if (!res) {
                this.setAttribute('class', 'click');//给属性赋值
                this.innerText = '座位已选';
            } else {
                this.setAttribute('class', '');
                this.innerText = '';
            }
        }
    }
</script>

</html>