WEB/JavaScript43 요소의 위치와 크기 1. getBoundingClientRect();* 엘리먼트의 크기를 반환한다. Coding - 결과 2. Viewport* 문서의 내용 중 사용자에게 보여지는 부분을 의미한다. 이에따라 문서의 좌표와 Viewport의 좌표가 있다.* Viewport 좌표는 스크롤이 생기면 스크롤의 위치에 따라 요소의 위치가 달라진다.* 스크롤의 정도를 알고 싶으면 window.pageYOffset 속성을 사용하면 알 수 있다. (※ 구버전 웹브라우저는 scrollTop 속성 이용 ) - 사용 예* getBoundingClientRect의 top 속성과 window.pageYOffset의 값이 1초마다 출력 Coding 3. 문서의 좌표* Viewport의 좌표에 스크롤의 정도를 더하면 알 수 있다. // 위 예제의 함.. 2016. 10. 16. Text 객체 : 조작 API 조작 API* 문자를 제어하는 API - 종류* appendData() : 인자로 추가 할 텍스트를 넘겨주어 마지막에 추가한다.* deleteData() : 첫번째 인자부터 두번째 인자까지 텍스트 삭제 * insertData() : 두번째 인자로 삽입할 텍스트를 넘겨주어 첫번째 인자부터 텍스트를 삽입한다.* replaceData() : 세번째 인자로 변경할 텍스트를 넘겨주어 첫번째 인자부터 두번째인자까지 변경한다.* substringData() : 첫번째 인자부터 두번째 인자까지의 텍스트를 반환한다. - 예제 HTML! CSS //텍스트 필드 data : start : end : //기능 버튼 - 결과 HTML! CSS data : start : end : 2016. 10. 16. Text 객체 : 값 API 값 API * 텍스트 노드의 값을 가져오는 API - 예제 html css JavaScript - 결과 html css JavaScript TextNode * 실제 데이터가 저장되는 객체이다. * 공백과 줄바꿈도 텍스트 노드에 포함된다. 2016. 10. 16. Text 객체 Text 객체* 텍스트 노드에 관한 DOM 객체* 공백이나 줄바꿈도 Text 노드이다. - 기능* 값- data- nodeValue* 조작- appendData();- deletData();- insertData();- replaceData();- subStringData();* 생성- document.creatTextNode() 2016. 10. 16. 이전 1 2 3 4 5 6 ··· 11 다음 반응형
