본문 바로가기

자바스크립트 JavaScript

(3)
ClassName()으로 Element요소를 가져올 때 유의점 자바스크립트로 CSS를 변경하려고 하는데, Uncaught TypeError: Cannot set property 라는 메시지에 괴롭혀지고 있다면, 그리고 ClassName()으로 Element요소를 가져오고 있었다면? 혹시 나와 같은 실수가 아닐까? 위와 같은 단순한 HTML에 function cha() { document.getElementsByClassName("a").style.width="100px"; document.getElementsByClassName("a").style.height="100px"; document.getElementsByClassName("a").style.backgroundColor="red"; } ClassName으로 요소를 가져와서 CSS를 변경하는데 안된다. fu..
getElementById()없이 id.value가 가능한 이유 아이디 : 일반적으로 자바스크립트에서 특정 ID의 텍스트 상자 값을 가져올 때 위 예제와 같이 document.getElementById("id").value를 이용한다. 그러던 중 우연히 id.value를 사용해봤는데, document.getElementById("id").value와 동일하게 동작했다! 여기서 두가지 의문이 생겼다. 1. id.value는 어떤 원리로 동작하는 것인가? 2. id.value와 같은 단순한 형태를 두고 우리는 왜 굳이 getElementById를 사용하는가? 1. id.value의 동작원리 html 태그의 id 속성값은 자바스크립트에서 전역변수로 사용될 수 있다. x = document.getElementById("id"); var result = x.value; 위의 ..
마우스 올려놓는 동안 색이 변하는 텍스트를 만들어보자 자바스크립트로 제목과 같은 기능을 구현해보자. 핵심은 onmouseover, onmouseout 이벤트와 setInterval(), clearInterval() 메소드를 이용하는 것이다. onmouseover는 지정된 태그영역 안에 마우스가 위치해있을 때 작동 onmouseout은 지정된 태그영역 바깥에 마우스가 위치해있을 때 작동 b = setInterval(x, a) x()메소드를 0.00a초마다 호출하겠다는 뜻. 숫자값 b를 리턴한다. clearInterval(b) 기능은 setInterval()의 정지 b는 setInterval()의 숫자값 b 색변경 테스트 코드작성을 마치면서... 1. 색지정시 Math.random()메소드를 이용하면 더 다채롭다. 2. changeColor()메소드에서 무한루..