JS点击切换盒子背景颜色

最新推荐文章于 2024-06-19 20:30:31 发布

夜深沉nl

最新推荐文章于 2024-06-19 20:30:31 发布

阅读量2.3k

点赞数 2

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/sinat_49951734/article/details/127373209

版权

JS点击切换盒子背景颜色

1.首先准备一个盒子

<body>
	<div id="dv"></div>
</body>

2.简单设置宽高

<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background: #000000;
			}
</style>

3.获取元素，绑定点击事件

3.1 两种颜色格式，第一种rgb形式

<script>
		var div = document.getElementById("dv");
	
	
		div.onclick  = function () {
			
			var r = Math.floor(Math.random()*256);
			var g = Math.floor(Math.random()*256);
			var b = Math.floor(Math.random()*256);
			var rgb = '('+r+','+g+','+b+')';

			div.style.backgroundColor="rgb"+rgb;
			console.log("rgb"+rgb);
			
		 }
		
	</script>

3.2第二种十六进制形式

<script>
		var div = document.getElementById("dv");
		div.onclick  = function () {
		    var r = parseInt((Math.random()*256)).toString(16);
		    var g = parseInt((Math.random()*256)).toString(16);
		    var b = parseInt((Math.random()*256)).toString(16);
             div.style.backgroundColor="#" +r+g+b;
			console.log("#" +r+g+b);
         }
		
	</script>