-
[javascript] 58. DOM CSS - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:38JavaScript HTML DOM - Changing CSS
1. Changing HTML Style
HTML 요소의 스타일을 변경하기 위해서 아래 문법을 사용합니다:document.getElementById(id).style.property=new style아래 예제는 <p> 요소의 스타일을 변경하는 예제입니다:
123456789101112131415161718<!DOCTYPE html><html><body><p id="p1">Hello World!</p><p id="p2">Hello World!</p><script>document.getElementById("p2").style.color = "blue";document.getElementById("p2").style.fontFamily = "Arial";document.getElementById("p2").style.fontSize = "larger";</script><p>The paragraph above was changed by a script.</p></body></html>cs 2. Using Events
HTML DOM은 이벤트가 발생했을 때, 코드를 실행하도록 허용합니다.이벤트는 HTML 요소에 어떠한 일이 발생할 때, 브라우저에서 생겨나는 것 입니다.- 요소가 클릭 되었을 때- 페이지가 로드 되었을 때
- 입력 필드가 변경 되었을 때
아래 예제는 id가 id1인 HTML 요소의 스타일을 버튼이 클릭 되었을 때 바꾸는 예제입니다:
1234567891011121314<!DOCTYPE html><html><body><h1 id="id1">My Heading 1</h1><button type="button"onclick="document.getElementById('id1').style.color = 'red'">Click Me!</button></body></html>cs 'Web > JavaScript' 카테고리의 다른 글
[javascript] 61. DOM Navigation - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 60. DOM Event Listener - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 59. DOM Event - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 57. DOM HTML - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 56. DOM 요소(DOM elements) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 55. DOM 문서(DOM document) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13