JS点谁 谁变色
时间:2022-07-25
本文章向大家介绍JS点谁 谁变色,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
效果图比我描述的清楚,需要自取,不懂就问。
别看代码一般, 实则短小精悍, 类似单击切换, 用途十分广泛。
代码、用途详解: 首先 var h1s = … 获取Dom节点 此时的 h1s 是一个数组,数组里存放了4个< h1>标签,它们的下标为 “ 0,1,2,3 ”, 若我想操作第一个,就写: h1s[0].οnclick=function(){} 想操作第二个,就写: h1s[1].οnclick=function(){} 现在我想操作所有的h1标签,实现点击h1,该 h1 字体颜色更改为红色。 我使用 for of 遍历这个数组
for(let i of h1s){
console.log(i);
};
打印结果为:
那我想点谁谁变色,直接在 for 循环内部加点击事件 i.οnclick=function(){ i.style.color=‘red’; } 意为:此时的 i 被点击了,此时的 i 将执行function(){ } 内部的语句 语句是:i.style.color=‘red’; 因此:当前下标为 i 的 h1,字体变为红色字体。 那我只想让当前 h1 的字体变为 红色,让刚刚点过的 h1 颜色变回去该怎么办? 这么办:
i.οnclick=function(){
for(let t of h1s){
t.style.color='black';
}
i.style.color='red';
}
在你添加颜色之前,再遍历一次,让当前的所有 h1 字体变回原来的颜色,然后我再添加,因为代码的执行顺序是从上到下,所以两段执行语句不能交换位置。 如果此代码中你还有些许问题,或是前端相关问题,均可以在底部留言。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 剑指Offer LeetCode 面试题06. 从尾到头打印链表
- 最详细的docker中安装并配置redis
- 剑指Offer LeetCode 面试题59 - I. 滑动窗口的最大
- 剑指Offer LeetCode 面试题58 - II. 左旋转字符串
- 剑指Offer LeetCode 面试题58 - I. 翻转单词顺序
- 剑指Offer LeetCode 面试题56 - II. 数组中数字出现的次数 II
- 站在软件工程的角度重新思考面向对象(含高清图谱)
- 剑指Offer LeetCode 面试题57. 和为s的两个数字
- 白嫖Layui树型可折叠,可自定义,可搜索表格的实例
- 剑指Offer LeetCode 面试题53 - II. 0~n-1中缺失的数字
- 聊聊dubbo-go的DubboPackage
- 剑指Offer LeetCode 面试题53 - I. 在排序数组中查找数字 I
- Java虚拟机运行时数据区精华总结
- 剑指Offer LeetCode 面试题50. 第一个只出现一次的字符
- 剑指Offer LeetCode 面试题40. 最小的k个数