JavaScript：点击变颜色

最新推荐文章于 2024-08-05 04:49:43 发布

阿宝逃离地球

最新推荐文章于 2024-08-05 04:49:43 发布

阅读量690

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44848852/article/details/110455702

版权

JavaScript学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript：点击按钮变颜色作业

效果
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<ul name="boxs" id="box">
		<li>000</li>
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
		<li>555</li>
	</ul>

	<script type="text/javascript">
		var aLi = document.getElementsByTagName('li');
		var ul = document.getElementById('box');
		ul.style.listStyle = "none";
		for (var i = 0;i< aLi.length; i++) {
			aLi[i].style.backgroundColor = "pink";
			aLi[i].style.display = "block";

			aLi[i].style.height = "35px";
			aLi[i].style.width = "150px";

			aLi[i].style.marginLeft = "15px";
			aLi[i].style.marginTop = "15px";
			aLi[i].style.padding = "0px";

			aLi[i].style.textAlign = "center";
			aLi[i].style.color = "white";
			aLi[i].style.fontSize = "100%";
			aLi[i].style.lineHeight = "200%";

			var q = aLi[i].style.backgroundColor;
			aLi[i].onclick = function () {
				// body...
				alert(this.innerHTML);
				this.style.backgroundColor = "yellow";
			};
			
		}

		
	</script>
</body>
</html>

阿宝逃离地球

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript：点击变颜色

<!DOCTYPE html><html><head> <title></title></head><body> <ul name="boxs" id="box"> <li>000</li> <li>111</li> <li>222</li> <li>333</li> <li&gt
复制链接

扫一扫

专栏目录