原生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>

</head>

<body>

   

    <button>按钮1</button>

    <button>按钮2</button>

    <button>按钮3</button>

    <button>按钮4</button>

    <button>按钮5</button>

    <script>

        // 1. 获取所有按钮元素

        let btns = document.getElementsByTagName('button');

        // btns得到的是伪数组  里面的每一个元素 btns[i]

        for (let i = 0; i < btns.length; i++) {

            btns[i].onclick = function() {

                // (1) 我们先把所有的按钮背景颜色去掉

                for (let i = 0; i < btns.length; i++) {

                    btns[i].style.backgroundColor = '';

                }

                // (2) 然后才让当前的元素背景颜色为red

                this.style.backgroundColor = 'red';

            }

        }

    </script>

</body>

</html>

相关推荐

  1. 原生js思想

    2024-01-17 02:38:02       54 阅读
  2. 排序思想-快

    2024-01-17 02:38:02       28 阅读
  3. 基于select for update 实现数据库

    2024-01-17 02:38:02       35 阅读
  4. 【六】CocosCreator-CCObject.js分析

    2024-01-17 02:38:02       51 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-17 02:38:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-17 02:38:02       106 阅读
  3. 在Django里面运行非项目文件

    2024-01-17 02:38:02       87 阅读
  4. Python语言-面向对象

    2024-01-17 02:38:02       96 阅读

热门阅读

  1. Vue 3面试题

    2024-01-17 02:38:02       56 阅读
  2. Linux IDEA 安装及环境配置

    2024-01-17 02:38:02       56 阅读
  3. c++八股3

    2024-01-17 02:38:02       51 阅读
  4. 面试官:什么是垂直越权?有哪些解决方案?

    2024-01-17 02:38:02       49 阅读
  5. 02-k8s学习笔记之相关组件

    2024-01-17 02:38:02       47 阅读