源生js写，点击切换不同颜色

最新推荐文章于 2022-11-29 17:55:19 发布
最新推荐文章于 2022-11-29 17:55:19 发布
阅读量322 收藏
点赞数
文章标签： 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuli0927/article/details/125516184
版权

JavaScript DOM操作 事件监听 元素样式 点击事件
关键词由CSDN通过智能技术生成

<style type="text/css">
            .container{
                display: flex;
                align-items: center;
                justify-content: flex-start;
                height: 60px;
            }
            .item{
                width: 100px;
                height: 100%;
                background-color: green;
                margin: 0 10px;
            }
        </style>
    </head>
    <body>
        <h2>点击不同的块切换颜色</h2>
        <div class="container">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <script type="text/javascript">
            var items=document.querySelectorAll('.item');
            for (var i=0;i<items.length;i++){
                items[i].οnclick=function(){
                    for (var j=0;j<items.length;j++){
                        items[j].style.backgroundColor='';
                    }
                    this.style.backgroundColor=' #f00';
                }
            }
        </script>

努力站桩的奶酪呦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js-点击div来回切换颜色
止水Itachi
04-01 1767
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl...
原生js点击变色
gaojianqiao1234的博客
11-19 710
1.原理：点击时清除所有class,在this点击元素上添加 2.` 11111 1111 1111 1111 1111 } } `
前端 - JavaScript 练习 - if 点击切换颜色
一只小网虫的博客
09-02 1264
三色切换 - 点击切换颜色 <!-- * @Author: Wan Linkun * @Date: 2021-09-02 10:49:29 * @LastEditTime: 2021-09-02 15:02:15 * @LastEditors: Wan Linkun Compile * @Description: * 769676131@qq.com * @总结: --> <!DOCTYPE html> <html lang="en"> <hea
php js点击变色,JS实现按钮点击颜色切换功能示例分享
weixin_29047545的博客
03-10 702
本文主要介绍了JS实现的按钮点击颜色切换功能,涉及js鼠标事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下，希望能帮助到大家。先来看看运行效果：具体代码如下：www.jb51.net 点击切换按钮颜色按钮1按钮2按钮3//设置背景颜色//如果设置参数函数会节省函数数量吧//设置flag+参数函数flag = "btn1";function btn1(){document.getEl...
JS点击切换盒子背景颜色
sinat_49951734的博客
10-17 2394
JS点击切换盒子背景颜色。
Js_demo:源生js轮播图demo
05-18
本示例"Js_demo:源生js轮播图demo"将深入讲解如何利用纯JavaScript（非jQuery或其他库）创建一个基本的轮播图效果。 轮播图是一种常见的网页元素，用于展示一组图片或内容，用户可以通过点击按钮或自动切换来浏览。...
源生js实现验证码功能
07-21
源生js实现验证码功能，附带源码，可以参考学习，
原生js+css实现tab切换功能
10-14
在本文中，我们将探讨如何使用原生JavaScript和CSS来实现一个简单的Tab切换功能，而无需依赖任何外部库或框架，如jQuery。这个功能在网页设计中非常常见，用于组织和展示分段的内容。 首先，我们来看一下HTML结构。...
js源生选字游戏
09-22
在"js源生选字游戏"中，JavaScript负责处理用户的交互行为，比如点击事件。例如，当用户点击一个选项时，JavaScript会捕获这个事件，并根据用户的选择进行相应的判断和反馈。 其次，DOM（文档对象模型）是...
JavaScript源生拼图
11-20
JavaScript源生拼图是一款基于JavaScript实现的互动游戏，它允许用户通过移动图片碎片来完成一幅完整的图像，类似于经典的纸质拼图游戏。这个压缩包包含一个`img`文件夹和一个`demo`文件，使得将其集成到任何Web项目...
javascript实现控制div颜色
10-23
本文给大家分享的是使用javascript实现控制DIV背景色的代码，非常的简单实用，有需要的小伙伴可以参考下。
js实现绑定多个按钮并当点击某个按钮时改按钮颜色改变
黄大仙
08-05 3766
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>按钮</button> <button>按钮</button> <button>按钮</button> <b
（10）JS之按下不同的按钮显示不同的颜色
虚心求学_一点一滴
05-25 2743
<!-- --> #div1{ width:200px; height:200px; background:red; } function setColor(color){ var oDiv=document.getElementById('div1'); oDiv.style.background=color; } /* function to
js实现点击盒子后修改颜色和宽度
黄大仙
08-04 3317
<style> div { width: 200px; height: 200px; background-color: pink; } </style> <div></div> <script> var div = document.querySelector('div'); div.onclick = functio
通过JavaScript实现:盒子-隐藏-弹出-改变颜色效果
m0_62181310的博客
05-10 810
通过鼠标点击,实现盒子弹出效果 效果展示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8" /> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } ul..
JavaScript多个按钮实现切换不同的颜色
YIC020920的博客
11-29 2556
以上的版本需要思考的地方：如果需要触发更多的事件，一个个的调用还是非常麻烦的，需要我们可以试试用动态实现，将颜色存放在数组里。可以在评论上展示一下你们的见解，怎样实现更多按钮点击之后可以切换更多的颜色！div样式的中的id需要调整一下，你们结合Script代码修改一下吧。展示一下它的div情况，css样式你们可以自行设计哈！仅供参考，依然有需要优化的地方，发挥你的想象去思考吧！，非常麻烦，但是实现起来相对比较容易。的知识点，整体还是比较好理解的。仅供参考，仍然有需要优化的地方。版本实现了、、优化，运用到。
多按钮，点击当前按钮变色，点击其它按钮恢复
simple_smile_sun的博客
03-13 9023
本文，参考《有多个按钮，点击一个变色，点击另一个变色，原来的恢复颜色》作者：沐阳的夏天。 代码如下： 一、表格中存在多个按钮                                                                                                                    
js获取图片主色改变盒子的背景色
初心
11-04 534
【代码】js获取图片主色改变盒子的背景色。
js 点击button切换颜色_Vue.js从零开始——入门（2）
weixin_39965102的博客
11-25 562
前一个章节做了简单的介绍、示例和安装方式的演示，接下来我们就可以来看看 Vue 的基础使用了，这里参考了官网介绍 — Vue.js，并且直接使用了官网的名词和解释，当然还有些自己的理解。1 模板语法Vue 的最基础实现就是模板语法，也就是使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的...
源生mysql封装工具类
最新发布
09-13
然而，这些工具类与源生的MySQL封装工具类并没有直接的关系。如果你需要使用源生的MySQL封装工具类，你可以使用JDBC来连接和操作MySQL数据库。在Java中，JDBC提供了一套API来与数据库进行交互，包括连接数据库、执行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值