案例:排他功能

image.png

css

<style>
        input {
            color: black;
            background-color: aquamarine;
            border: 1px solid aqua;
            border-radius: 10px;
        }

        input:hover {
            font-weight: 900;
            background-color: bisque;
        }
    </style>

body

<body>

    <input type="button" value="我蒋迪没怀孕">
    <input type="button" value="我蒋迪没怀孕">
    <input type="button" value="我蒋迪没怀孕">
    <input type="button" value="我蒋迪没怀孕">
    <input type="button" value="我蒋迪没怀孕">
    <input type="button" value="我蒋迪没怀孕">

    <script>
        var btnObjs = document.getElementsByTagName("input");

        for (var i = 0; i < btnObjs.length; i++) {
            btnObjs[i].onclick = function () {

                for (var j = 0; j < btnObjs.length; j++) {
                    btnObjs[j].value = "我蒋迪没怀孕";
                    btnObjs[j].style.background = "aquamarine";
                    
                }

                this.value = "我蒋迪怀孕了";
                this.style.background = "red";
            }
        }
    </script>
</body>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容