JavaScript之DOM操作实现一个鼠标滑动颜色变化实例

最新推荐文章于 2021-06-07 17:47:20 发布

gxgalaxy

最新推荐文章于 2021-06-07 17:47:20 发布

阅读量644

点赞数

分类专栏：前端 JavaScript

本文链接：https://blog.csdn.net/gxgalaxy/article/details/90272849

版权

前端同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

JavaScript

23 篇文章 1 订阅

订阅专栏

<!DOCTYPE  html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>demo</title>
		<link rel="stylesheet" href="./src/demo.css">
	<style>
		*{
			margin:0;
			padding:0;
		}
		li{
			box-sizing: border-box;
			float: left;
			width:10px;
			height: 10px;
			border:1px solid black;
		}
		ul{
			list-style: none;
			width:200px;
			height: 200px;
		}

	</style>
	</head>
		
    <body>
	    <ul>
	    	<li img-date='0'></li> //此处省略399个li标签 
            </ul>
	    <script type="text/javascript">
		    var ul =document.getElementsByTagName('ul')[0];//将ul都取出来
            //将li通过target选中
		    ul.onmouseover = function(e){
			    var event = e || window.event;
			    var target = event.target ||event.srcElement;
			    target.style.backgroundColor = "rgb(0,255," + target.getAttribute('img-date')+")";
			    target.setAttribute('img-date',parseInt(target.getAttribute('img-date'))+200);
		    }
		    //当鼠标滑过的时候样式
	    </script>	
    </body>
    </html>

效果可自行复制代码执行：

gxgalaxy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之DOM操作实现一个鼠标滑动颜色变化实例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <link rel="stylesheet" href="./src/demo.css"> <style> *{...
复制链接

扫一扫