javascript基礎練習-批量修改樣式

代碼部分:

<!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>


發佈了23 篇原創文章 · 獲贊 6 · 訪問量 6455
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章