[javascript] DOM 스크립트

9장 CSS와 DOM 연동하기를 읽으면서 간단 정리

1. DOM의 style 프로퍼티로는 외부 스타일 시트에서 선언한 style 객체 및 문서 내부의 미리 선언한 스타일 정보도 가져올 수 없다.
  오로지 인라인으로 선언된 style 속성의 정보만을 가져올 수 있음.

2. DOM으로 style 변경 시 기존 class 속성에 새 class 속성을 추가하고 싶을 때
  eleme.className += " newClass"; 이런 식으로 공백을 두고 추가.

Summary.
  DOM으로 style을 바꾸는 일이 얼마나 있을지는 모르겠음. 단, CSS에 정의되어 있는 class에 대한 정의를 이용해서 DOM으로 class를 변경하는 것 정도는 사용할지도 모르겠음.

10장 애니메이션 슬라이드쇼 만들기

1. setTimeout/clearTimeout

variable = setTimeout("function", interval); clearTimeout(variable);

변수명 = setTimeout(함수, 인터벌(밀리초));
clearTimeout(변수명); // 위에서 설정한 timeout을 취소

movement = setTimeout("moveMessage()", 5000); clearTimeout(movement);

2. parseInt

parseInt(string)

문자열을 정수로 반환
문자열 중 정수만 반환 : parseInt("39 degree") == 39

3. CSS: overflow
  overflow:visible --> 전체를 모두 표시. 내용을 포함하고 있는 요소 밖으로 삐져나가서 표시
  overflow:hidden --> 요소 밖으로 나간 것은 표시하지 않음
  overflow:scroll --> 요소 안의 것만 보이나 스크롤 바가 생김
  overflow:auto --> 내용이 클 경우 스크롤 바가 생김

4. 사용자 지정 프로퍼티

var elem = document.getElementById(elementID); elem.movement = setTimeout(repeat, interval); if(elem.movement) {     clearTime(elem.movement); }

elementID에 movement라는 프로퍼티를 추가.

5. @import

<style type="text/css" media="screen">   @import url("styles/layout.css"); </style>

css파일 안에서도 사용가능
js도 가능.

11장 총정리

1. margin, padding

* {     padding: 0;     margin: 0; }

전체 선택자로 마진과 패딩을 0으로 설정 -> 브라우저마다 제각각인 기본 스타일 문제를 해결

부록

DHTMLgoodies.com