当前位置： 首页 > news >正文

JS点击图片指定对象变色两种方法

news 2026/1/25 15:06:48

要求：点击上面的颜色实现下面的图像变成相同的颜色

 

难点：对于js函数的this对象不太清楚如何传递

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>changeColor</title><style>td {width: 50px;height: 50px;}</style>
</head>
<body><table><tr><td style="background-color: #2f74ff"></td><td style="background-color: yellow"></td><td style="background-color: pink"></td><td style="background-color: red"></td><td style="background-color: green"></td><td style="background-color: grey"></td><td style="background-color: chocolate"></td></tr></table><table id="square" style="width: 500px; height: 500px; background-color: lightblue"></table><script>function changColor(){console.log(this)var bc = this.style.backgroundColorvar target = document.getElementById('square')target.style.backgroundColor = bc}var tot = document.querySelectorAll('table tr td')for (const obj of tot) {obj.onclick = changColor}</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>changeColor</title><style>td {width: 50px;height: 50px;}</style>
</head>
<body><table><tr><td style="background-color: #2f74ff" onclick="changColor(this)"></td><td style="background-color: yellow" onclick="changColor(this)"></td><td style="background-color: pink" onclick="changColor(this)"></td><td style="background-color: red" onclick="changColor(this)"></td><td style="background-color: green" onclick="changColor(this)"></td><td style="background-color: grey" onclick="changColor(this)"></td><td style="background-color: chocolate" onclick="changColor(this)"></td></tr></table><table id="square" style="width: 500px; height: 500px; background-color: lightblue"></table><script>function changColor(obj){console.log(obj)var bc = obj.style.backgroundColorvar target = document.getElementById('square')target.style.backgroundColor = bc}</script>
</body>
</html>

 

相关文章：

JS点击图片指定对象变色两种方法

要求&#xff1a;点击上面的颜色实现下面的图像变成相同的颜色 难点&#xff1a;对于js函数的this对象不太清楚如何传递 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>changeColor</title>&l…...

编程日记 2023/11/9 19:33:22

什么是浏览器指纹？指纹浏览器如何避免浏览器指纹的追踪识别？

在做独立站跨境电商的过程中&#xff0c;海外社交媒体平台已成为我们必不可少的交易渠道。但是&#xff0c;由于各大平台对账号管理极其严格&#xff0c;对账户进行严密监控也成为了常态。这当然与浏览器指纹识别有关&#xff0c;今天龙哥就给大家科普一下什么是浏览器指纹&…...

编程日记 2023/11/9 19:32:21

uni-app 、Spring Boot 、ant Design 打造的一款跨平台包含小说（仿真翻页、段落听书）、短视频、壁纸等功能含完备后台管理的移动应用

简介 咪哩快看&#xff0c;为用户提供优质阅读&#xff0c;短视频&#xff0c;共同记录美好生活的移动应用&#xff0c;并含有一套完备的后台管理体系&#xff0c;助力开发者快速数字化&#xff0c;开启你的财富之门&#xff01; 官网&#xff1a; https://miliqkdoc.motopa.…...

编程日记 2023/11/9 19:31:20

STM32-EXTI中断

EXTI简介 EXTI&#xff08;Extern Interrupt&#xff09;外部中断 EXTI可以监测指定GPIO口的电平信号&#xff0c;当其指定的GPIO口产生电平变化时&#xff0c;EXTI将立即向NVIC发出中断申请&#xff0c;经过NVIC裁决后即可中断CPU主程序&#xff0c;使CPU执行EXTI对应的中断程…...

编程日记 2023/11/9 19:30:19

2023云栖大会，Salesforce终敲开中国CRM市场

2015年被视为中国CRM SaaS元年&#xff0c;众多CRM SaaS创业公司和厂商在Salesforce的榜样作用下涌入了CRM SaaS赛道。在全球市场&#xff0c;Salesforce是CRM SaaS领域的领导厂商&#xff0c;连续多年占据了全球CRM SaaS第一大厂商地位。然而&#xff0c;Salesforce作为业务类…...

编程日记 2023/11/9 19:29:18

工业镜头接口类型

现有产品主要有以下接口 1、C:最常见的工业相机接口&#xff0c;受限于接口物理尺寸大小&#xff0c;最大靶面目前是4/3” 2、M42:M421.0,2k和4k线阵相机使用 3、M58S:M580.75,大靶面相机使用&#xff0c;可以转C(限于CH080相机&#xff0c;靶面4/3”)&#xff0c;可以转F,可以…...

编程日记 2023/11/9 19:28:16

生产环境中oracle dba权限检查和回收相关命令汇总

一、oracle dba权限检查和回收的作用和意义 在Oracle数据库生产环境中&#xff0c;回收oracle dba权限的作用和意义重大&#xff0c;具体表现在以下三方面&#xff1a; 安全性&#xff1a;回收赋权检查和回收可以确保数据库中的权限控制得到有效管理。通过检查和回收权限&…...

编程日记 2023/11/9 19:27:15

实现微信转账到零钱经验

最近写微信转账到零钱的功能。 微信 商家转账到零钱 一-CSDN博客 微信 商家转账到零钱 二-CSDN博客 除了基本接口处理&#xff0c;也要兼顾系统财务安全&#xff0c;和异常处理情况。中心思想就是实现功能的同时&#xff0c;别给自己找事…… 本次开发在原有基础上二开。采…...

编程日记 2023/11/9 19:26:14

SpringCloud——负载均衡——OpenFeign

Feign是一个声明式的客户端接口&#xff0c;相比RestTemplate&#xff0c;更好的简化了微服务之间的调用方式。而且Feign默认集成了Ribbon&#xff0c;可以实现负载均衡。 1.OpenFeign与Feign OpenFeign在Feign的基础上支持SpringMVC的注解。OpenFeign的FeignClient可以解析Re…...

编程日记 2023/11/9 19:25:13

力扣370周赛

力扣第370场周赛 找到冠军 I 答案即入度为0的点 class Solution { public:int findChampion(vector<vector<int>>& grid) {vector<int>d(1005);int n grid.size() , m grid[0].size();for(int i 0 ; i < n ; i ){for(int j 0 ; j < m ; j )…...

编程日记 2023/11/9 19:24:12

EMNLP2023 | 让模型学会将提示插入到合适的中间层

深度学习自然语言处理 原创作者&#xff1a;cola 现有的提示微调方法基本是人工选择提示层&#xff0c;而人工选择将提示插入到哪些层次并非一定合理&#xff0c;这导致了很大程度上限制提示微调发挥潜能。我们的模型(SPT)可以让模型自己学习应该在哪些中间层插入提示&#xff…...

编程日记 2023/11/9 19:23:11

【PG】PostgreSQL单机部署（简洁命令版）

目录 1 下载安装包 2 上传至需要安装的服务器 3 服务器安装所需依赖包 4 解压安装包 5 配置安装 6 创建用户 7 创建目录修改权限 8 设置环境变量 9 设置共享库 10 初始化 11 启动数据库 12 关闭数据库 13 查看数据库状态 14 连接数据库 1 下载安装包 通过下载…...

编程日记 2023/11/9 19:22:08

AI：69-基于深度学习的音乐推荐

🚀 本文选自专栏：AI领域专栏 从基础到实践，深入了解算法、案例和最新趋势。无论你是初学者还是经验丰富的数据科学家，通过案例和项目实践，掌握核心概念和实用技能。每篇案例都包含代码实例，详细讲解供大家学习。 📌📌📌在这个漫长的过程，中途遇到了不少问题，但是…...

编程日记 2023/11/9 19:21:07

php 使用phpoffice/phpspreadsheet拓展实现导出图片

基础操作参考&#xff1a;https://blog.csdn.net/huaweichenai/article/details/95994006 文档地址&#xff1a;https://phpspreadsheet.readthedocs.io/ github地址&#xff1a;https://github.com/PHPOffice/PhpSpreadsheet 导出插入图片主要使用\PhpOffice\PhpSpreadshee…...

编程日记 2023/11/9 19:20:06

几种解决mfc140.dll文件缺失的方法，电脑提示mfc140.dll怎么办

电脑提示mfc140.dll缺失&#xff0c;如果你不去处理的话&#xff0c;那么你的程序游戏什么都是启动不了的&#xff0c;如果你想知道有什么方法可以解决那么可以参考这篇文章进行解决&#xff0c;今天给大家几种解决mfc140.dll文件缺失的方法。电脑提示mfc140.dll也不用担心解决…...

编程日记 2023/11/9 19:19:05

并发修改异常

并发修改异常&#xff08;Concurrent Modification Exception&#xff09;是指在多线程环境下&#xff0c;当一个方法检测到对象的并发修改&#xff0c;但不允许这种修改时&#xff0c;抛出的一种异常。换句话说&#xff0c;当两个或多个线程同时对一个对象进行修改时&#xff…...

编程日记 2023/11/9 19:18:04

split() 函数实现多条件转为数据为数组类型

使用 split() 函数并传递正则表达式 /[,;.-]/ 作为分隔符来将字符串按照逗号、分号和破折号进行拆分&#xff0c;并将结果赋值给 splitArray 数组。下面是一个示例代码&#xff1a; 在上面的示例中&#xff0c;我们使用 split() 函数将 inputString 字符串按照逗号、分号和破折…...

编程日记 2023/11/9 19:17:03

【Springboot】Vue3-Springboot引入JWT实现登录校验以及常见的错误解决方案

文章目录 前言一、JWT简单介绍二、token校验设计思路三、使用步骤Springboot部署JWT引入依赖&#xff1a;创建登录实体类后端&#xff1a;LoginController.java路由守卫函数 四、问题 前言 项目版本&#xff1a; 后端&#xff1a; Springboot 2.7、 Mybatis-plus、Maven 3.8.1…...

编程日记 2023/11/9 19:16:03

VueCli 自定义创建项目及配置

一、VueCli 自定义创建项目 1.安装脚手架 (已安装) npm i vue/cli -g2.创建项目 vue create hm-exp-mobile选项 Vue CLI v5.0.8 ? Please pick a preset:Default ([Vue 3] babel, eslint)Default ([Vue 2] babel, eslint) > Manually select features 选自定义手动…...

编程日记 2023/11/9 19:15:01

2024年节假日sql脚本（区分休息日、节假日、工作日、调休工作）

建表 CREATE TABLE no_work_day (id int NOT NULL AUTO_INCREMENT,day varchar(255) DEFAULT NULL,PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb3 COMMENT节假日表;执行脚本插入数据 INSERT INTO no_work_day (day) VALUES (20240101); INSERT INTO no_work_day (…...

编程日记 2023/11/9 19:13:59

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

编程新知 2025/8/1 10:20:23

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2026/1/21 20:35:17

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2026/1/14 18:27:53

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

编程新知 2026/1/22 16:30:11

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2026/1/25 13:33:35

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2026/1/24 22:21:03

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

编程新知 2025/12/25 4:05:41