실습문제 9-7
WEB/TRAINNING 2017. 12. 4. 09:21 |7. 웹 페이지에 있는 모든 <span> 태그에 대해, 마우스가 올라오면 해당 태그의 텍스트에 밑줄을 긋고,
내려가면 밑줄을 지우는 자바스크립트 코드를 완성하라.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <title>이벤트 객체의 target</title> </head> <script> window.onmouseover = function(e) { // 이곳에 자바스크립트 코드 작성 } window.onmouseout = function(e) { // 이곳에 자바스크립트 코드 작성 } </script> <body> <h3>span 태그에만 onmouseover/onmouseout</h3> <hr> <p>span 태그에 대해서만 <span>마우스</span>가 올라올 때 밑줄이 그어지고 <span>마우스</span>가 내려갈 때 밑줄이 사라지도록 <span>자바스크립트 코드</span>를 작성한다. </p> </body> </html> | cs |
힌트)
이벤트가 발생하면, 이벤트 객체를 검사하여 e.target.tagName=="SPAN"인 경우만 처리하면 된다.
tagName 프로퍼티는 항상 대문자의 문자열을 가진다.
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 | <!DOCTYPE html> <html> <head> <title>이벤트 객체의 target</title> <script> window.onmouseover = function(e) { if(e.target.tagName.toLowerCase() != "span") return; else e.target.style.textDecoration ="underline"; } window.onmouseout = function(e) { if(e.target.tagName.toLowerCase() != "span") return; else e.target.style.textDecoration ="none"; } </script> </head> <body> <h3>span 태그에만 onmouseover/onmouseout</h3> <hr> <p>span 태그에 대해서만 <span>마우스</span>가 올라올 때 밑줄이 그어지고 <span>마우스</span>가 내려갈 때 밑줄이 사라지도록 <span>자바스크립트 코드</span>를 작성한다. </p> </body> </html> | cs |