실습문제 9-8
WEB/TRAINNING 2017. 12. 12. 21:47 |8. 다음 웹 페이지에서 <li> 아이템을 클릭하면 텍스트 크기를 1.3배(1.3em)로 출력하도록 자바스크립트 코드를 작성하라.
다른 아이템이 클릭되면 이전 아이템을 원래 크기로(1em) 출력한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> <title>이벤트 객체의 target</title> <script> // 이곳에 자바스크립트 코드 작성 </script> </head> <body> <h3>아이템을 클릭하면 1.3배 크기로</h3> <hr> <p>여름 방학 때 하고 싶은 것들</p> <ul> <li>자전거로 대한민국 일주</li> <li>책 100권 읽기</li> <li>철인 3종 경기 준비</li> <li>자바스크립트 정복</li> </ul> </body> </html> | cs |
힌트) document.getElementsByTagName("li")를 이용하라.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html> <head> <title>이벤트 객체의 target</title> <script> var prev = null; window.onclick = function(e) { if(e.target.tagName.toLowerCase() != "li") { return; } else { e.target.style.fontSize = "1.3em"; } if(prev != null) { prev.style.fontSize = "1em"; } prev = e.target; } </script> </head> <body> <h3>아이템을 클릭하면 1.3배 크기로</h3> <hr> <p>여름 방학 때 하고 싶은 것들</p> <ul> <li>자전거로 대한민국 일주</li> <li>책 100권 읽기</li> <li>철인 3종 경기 준비</li> <li>자바스크립트 정복</li> </ul> </body> </html> | cs |