javascript基础练习-批量修改样式

最新推荐文章于 2022-07-18 21:06:21 发布

wz前端初学者

最新推荐文章于 2022-07-18 21:06:21 发布

阅读量395

点赞数 1

分类专栏： javascript小练习

本文链接：https://blog.csdn.net/wz13759497175/article/details/78637898

版权

javascript小练习专栏收录该内容

18 篇文章 2 订阅

订阅专栏

代码部分:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		div{
			width: 100%;
			height: 100px;
			background: black;
			margin: 10px auto;
			transition: all 0.3s;
		}
		/*改变之后的样式*/
		.change{
			width: 600px;
			background: orange;
		}
	</style>
	<script type="text/javascript">
		window.οnlοad=function(){
			var box=document.getElementsByTagName('div');
			var b=document.getElementsByTagName("button")[0];
			b.οnclick=function(){
				for(var i=0;i<box.length;i++){
					if(box[i].className==" "){
						box[i].className="change";
					}else{
						box[i].className=" ";
					}
				}
			};
		}
	</script>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<button>点击改变样式</button>
</body>
</html>

wz前端初学者

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript基础练习-批量修改样式

代码部分: div{ width: 100%; height: 100px; background: black; margin: 10px auto; transition: all 0.3s; } /*改变之后的样式*/ .change{ width: 600px; background: orange; }
复制链接

扫一扫