js练习---隔X行循环换色

最新推荐文章于 2024-08-19 18:29:28 发布

Philo`

最新推荐文章于 2024-08-19 18:29:28 发布

阅读量589

点赞数

分类专栏： JS 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_44864833/article/details/122552448

版权

JS 专栏收录该内容

8 篇文章

订阅专栏

练习：

要求创建一个列表，每隔五行循环换色，目标要求效果如下：

在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>

	<body>
		<ul>
			<li class="l">1</li>
			<li class="l">2</li>
			<li class="l">3</li>
			<li class="l">4</li>
			<li class="l">5</li>
			<li class="l">1</li>
			<li class="l">2</li>
			<li class="l">3</li>
			<li class="l">4</li>
			<li class="l">5</li>
			<li class="l">1</li>
			<li class="l">2</li>
			<li class="l">3</li>
			<li class="l">4</li>
			<li class="l">5</li>
		</ul>

		<script type="text/javascript">
			//按照class名字获取标签
			var l = document.getElementsByClassName("l")


			//通过for循环给标签绑定事件
			for (var i = 0; i < l.length; i++) { //颜色使用，注意这里i变量使用的是var来声明的
			
				if (i % 5 == 0) {  //判断属于第几类，进行事件绑定
					l[i].onmouseover = function() {   //注意鼠标事件书写正确 聚焦元素为onmouseover   失去焦点为onmouseout
						this.style.color = "#ffff7f" //这里用this表示该对象的调用，不能用l[i]进行调用，因为i在该函数内读取不到
					}
					l[i].onmouseout = function() {
						this.style.color = ""
					}
				}
				
				if (i % 5 == 1) { 
					l[i].onmouseover = function() {
						this.style.color = "#00FFFF"
					};
					l[i].onmouseout = function() {
						this.style.color = ""
					};
				}
				
				if (i % 5 == 2) {
					l[i].onmouseover = function() {
						this.style.color = "#67339a"
					};
					l[i].onmouseout = function() {
						this.style.color = ""
					};
				}
				
				if (i % 5 == 3) {
					l[i].onmouseover = function() {
						this.style.color = "#0055ff"
					};
					l[i].onmouseout = function() {
						this.style.color = ""
					};
				}
				
				if (i % 5 == 4) {
					l[i].onmouseover = function() {
						this.style.color = "#ff0000"
					};
					l[i].onmouseout = function() {
						this.style.color = ""
					};
				}
			}
		</script>
	</body>
</html>

重点是鼠标指针移至元素之上时运行脚本的事件onmouseover和鼠标指针移出元素时运行脚本的事件onmouseout，函数要写对了。
同时在for循环中用的i为var性质，所以函数function内用this调用该对象，不能用l[i]。想要用l[i],则将var i改成let i,let 声明的变量在 let 命令所在的代码块内有效。