JavaScript设置样式

早川c

于 2021-07-26 14:52:24 发布

阅读量943

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/cclym/article/details/118940572

版权

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何利用JavaScript来动态地设置网页元素的样式，包括通过JavaScript生成随机数来实现颜色的随机变化，从而实现页面颜色的动态更新效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript设置样式

通过JavaScript设置样式

<body>
		<div id="box"></div>
	</body>
	<script type="text/javascript">
		//获取DOM对象
		var box = document.getElementById("box")
		box.style.width = "300px"
		box.style.height = "300px"
		//设置背景颜色
		// box.style["background-color"]= " blue "
		box.style.backgroundColor = 'blue'
		
	</script>

在这里插入图片描述
2.随机数

	<script type="text/javascript">
		var num = Math.random()  
		console.log(num)
		//求0-100之间的小数
		var a = Math.random()*100
		console.log(a)
		//去除小数部分
		var b = Math.floor(Math.random()*100)+1
		console.log(b)
	</script>

在这里插入图片描述

3.随机改变页面颜色

	<style type="text/css">
			body {
				background-color: ;
			}
		</style>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//颜色的组成规则：0-9 a-f 16进制颜色码 6位
		var colors = [`0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`]
		var color = "#"
		for (var i = 0; i < 6; i++) {
			var index = Math.floor(Math.random() * colors.length)
			color += colors[index]
		}
		document.body.style.background = color
	</script>

在这里插入图片描述