javascript を勉強中な者です。
簡単なラジオボタンを作成しました。
そこでより簡潔なコードがございましたらご教授願います。
なお、jqueryでの回答は受け付けておりません。
HTML
1<!doctype html> 2<head> 3<meta charset="utf-8"> 4<link rel="stylesheet" href="style.css"> 5</head> 6<body> 7 8<div class="radio" name="radio" onclick="radio()"> 9<div class="on" name="on">ON</div> 10<div class="off" name="off">OFF</div> 11</div> 12 13<script src="sample.js"></script> 14</body> 15</html>
CSS
1.radio { 2 width: 100px; 3 background-color: #eee; 4 border-radius: 28px; 5 display: inline-table; 6 box-shadow: 1px 1px 5px 0px inset; 7 padding:3px; 8 text-align: center; 9 font-family: Lucida Console; 10} 11.on { 12 display: inline-block; 13 float: left; 14 padding: 10px; 15 background: #eee; 16 border-radius: 20px; 17 box-shadow: none; 18 width:29px; 19 height:16px; 20} 21.off { 22 display: inline-block; 23 float: right; 24 background-color: #9f9; 25 border-radius: 20px; 26 padding: 10px; 27 box-shadow: 1px 1px 1px 1px; 28 padding: 10px; 29 width:29px; 30 height:16px; 31 32}
javascript
1var vary = 0; 2var off = document.getElementsByClassName("off"); 3var on = document.getElementsByClassName("on"); 4function radio() { 5 if(vary==0){ 6 off[0].style.backgroundColor="#eee"; 7 off[0].style.boxShadow="none"; 8 on[0].style.backgroundColor="#9f9"; 9 on[0].style.boxShadow="1px 1px 1px 1px"; 10 vary = 1; 11 }else{ 12 off[0].style.backgroundColor="#9f9"; 13 off[0].style.boxShadow="1px 1px 1px 1px"; 14 on[0].style.backgroundColor="#eee"; 15 on[0].style.boxShadow="none"; 16 vary = 0; 17 } 18}
回答5件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。