| JavaScript实现点击元素变色效果 |
| 2023-12-20 08:44:12 浏览次数：267 次 |
| |
| |
JavaScript是一种功能强大的编程语言，简称JS。已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。它是Web前端开发的基石，每一个Web开发人员必须掌握的编程技能。
JavaScript的执行依赖于浏览器本身， 而与操作环境无关。只要是能运行浏览器的计算机，而该浏览器又支持 JavaScript，则脚本就可正确执行。
1. 获取元素，设置状态
var zxw = document.getElementsByClassName("zxw");
var abc = 1;
声明变量时不需要指定数据类型，变量能随着赋值不同，自动变换数据类型。
2. 给获取的所有元素绑定事件
for (var i=0;i<zxw.length;i++) {
zxw[i].onclick=function(){
//要执行的代码
};
};
使用循环语句运行代码多次，且每次使用不同的值，给获取的所有元素绑定事件。
3. 不同状态执行不同代码
for (var i=0;i<zxw.length;i++) {
zxw[i].onclick=function(){
if (abc==1) {
//在事件中this指向了:当前正在操作的元素
this.style.background="red";
abc=2;
} else{
this.style.background="blue";
abc=1;
};
};
};
使用条件语句，在不同状态执行不同代码，并动态改变当前状态。
需要注意：
（1）. 一个等号表示赋值，两个等号才表示等于。
（2）. 在事件中this指向了当前正在操作的元素，这一点非常重要。
至此我们就成功实现了点击哪个元素，就让哪个元素变色的效果，并可变化不同颜色。代码稍微改变可实现围棋效果。具体效果如下：
当然在开发过程中还有诸多需要注意的方面，比如页面结构，样式书写，js的引入，循环退出条件等等，这些大家就在视频中来寻找答案吧，我已经作了详细的讲解。
|
| |
| |
|
|
|
PS色阶知识点