data屬性、屬性選取器、switch練習－Bug倉庫 // 程式日記

Sep 03 Sun 2017 22:29
data屬性、屬性選取器、switch練習

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		[data-state='grey']{
			background-color: #eee;
		}
		[data-state='red']{
			background-color: #f00;
		}
	</style>
</head>
<body>
	<button id="btn" data-state='grey'>我是按鈕</button>
	<script type="text/javascript">
		document.getElementById('btn').onclick=function(e){
			switch(e.target.getAttribute('data-state')){
				case 'grey':
				e.target.setAttribute('data-state','red');
				break;
				case 'red':
				e.target.setAttribute('data-state','grey');
				break;
			}
		}
	</script>
</body>
</html>