window, 스크롤, 마우스 좌표, getBoundingClientRect
# window
window.open(url, windowName, [windowFeatures]);
window.open(url, 창이름,옵션);| 옵션의 이름 | 설명 |
| width | 창 너비 |
| height | 창 높이 |
| location | 주소 표시줄 표시 여부 (yes 또는 no) |
| scrollbars | 스크롤 막대 표시 여부 |
| resizable | 창 크기의 변경 기능 여부 |
| toolbar | 도구 모음 표시 여부 |
| status | 상태 표시줄 표시 여부 |
| menubar | 메뉴 막대 표시 여부 |
let w = window.open(
'http://www.naver.com',
'naver',
'height=600,width=600');
setTimeout(() => {
w.close();
}, 3000);
# 스크롤 효과
| mdn | ||
| scrollTo | 스크롤 위치 | 바로가기 |
| scroll | 스크롤 위치 | 바로가기 |
# scrollTo : 문서의 지정위치로 이동
window.scrollTo({ left: x, top: y, behavior: "smooth" })
behavior 옵션
- auto : 기본값, 바로 위치로 이동
- smooth : 부드럽게 이동
# 스크롤 위치
이벤트 : scroll
| 속성 | 내용 |
| window.scrollX | 윈도우 가로 스크롤값 |
| window.scrollY | 윈도우 세로 스크롤값 |
window.addEventListener('scroll', e => {
console.log('스크롤가로:', window.scrollX,'스크롤세로:', window.scrollY);
});
window.pageYOffset:
현재 문서의 세로 스크롤 위치를 가져옵니다.
document.documentElement.scrollTop:
문서의 최상단에서 스크롤된 세로 픽셀 값을 가져옵니다.
document.body.scrollTop: 문서의 <body> 요소의 최상단에서 스크롤된 세로 픽셀 값을 가져옵니다. (몇몇 브라우저에서만 지원됩니다.)
# 마우스의 좌표를 확인
| 속성 | 내용 |
| event.clientX | 브라우저 좌측 상단 기준 X 좌표 |
| event.clientY | 브라우저 좌측 상단 기준 Y 좌표 |
| event.pageX | 브라우저 전체 페이지 좌측 상단 기준 X 좌표 |
| event.pageY | 브라우저 전체 페이지 좌측 상단 기준 Y 좌표 |
| event.screenX | 디바이스 좌측 상단 기준 X 좌표 |
| event.screenY | 디바이스 좌측 상단 기준 Y 좌표 |
| event.offsetX | 요소 좌측 상단 기준 X 좌표 |
| event.offsetY | 요소 좌측 상단 기준 Y 좌표 |
pageX, pageY는 페이지 스크롤 분량의 정보도 포함하며,
screenX, screenY는 웹 페이지를 보고 있는 디바이스(컴퓨터, 스마트폰)의 좌측 위를 기준으로 합니다.
document.addEventListener('mousemove', e => {
console.log('e.clientX, e.clientY' , e.clientX, e.clientY)
console.log('e.pageX, e.pageY', e.pageX, e.pageY)
console.log( 'e.screenX, e.screenY',e.screenX, e.screenY)
console.log( 'e.offsetX, e.offsetY',e.offsetX, e.offsetY)
})
const width =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
const height =
window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
| 속성 | 내용 |
| getBoundingClientRect | 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공 바로가기 |
| offsetTop | 부모를 기준으로 상대위치 바로가기 |
| offsetLeft | 부로를 기준으로 상대위치 |
# Element.getBoundingClientRect()
Element.getBoundingClientRect() 메서드는 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환합니다.
domRect = element.getBoundingClientRect();
반환 값은 padding과 border-width를 포함해 전체 엘리먼트가 들어 있는 가장 작은 사각형인 DOMRect 객체입니다. left, top, right, bottom, x, y, width, height 프로퍼티는 전반적인 사각형의 위치와 크기를 픽셀 단위로 나타냅니다. width와 height가 아닌 다른 프로퍼티는 뷰포트의 top-left에 상대적입니다.
ele.getBoundingClientRect().x : 현재 창기준 x좌표
ele.getBoundingClientRect().y : 현재 창기준 y좌표
ele.getBoundingClientRect().width : 엘리먼트 가로
ele.getBoundingClientRect().height : 엘리먼트 세로
ele.getBoundingClientRect().top : 현재 창기준 세로 시작점 부터 엘리먼트 윗변 까지의 거리
ele.getBoundingClientRect().left : 현재 창기준 가로 시작점 부터 엘리먼트 왼쪽변 까지의 거리
ele.getBoundingClientRect().right : 현재 창기준 가로 시작점 부터 엘리먼트 오른쪽변 까지의 거리
ele.getBoundingClientRect().bottom : 현재 창기준 세로 시작점 부터 엘리먼트 아래변 까지의 거리
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px; height: 200px;
position: absolute; left: 300px; top: 200px;
border: 1px solid #000;
background: pink; box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">xx</div>
<script>
let box = document.querySelector(".box").getBoundingClientRect();
console.log(`x: ${box.x}`);
console.log(`y: ${box.x}`);
console.log(`left: ${box.left}`);
console.log(`top: ${box.top}`);
console.log(`right: ${box.right}`);
console.log(`bottom: ${box.bottom}`);
console.log(`width: ${box.width}`);
console.log(`height: ${box.height}`);
</script>
</body>
</html>
결과
x : 뷰포트로부터 요소의 왼쪽 상단 모서리 가로 위치값
y : 뷰포트로부터 요소의 왼쪽 상단 모서리 세로 위치값
left : 뷰포트로 부터 요소의 왼쪽 위치값
top : 뷰포트로 부터 요소의 위쪽 위치값
right : 뷰포트로 부터 요소의 오른쪽 위치값
bottom : 뷰포트로 부터 요소의 아래쪽 위치값
width : 요소의 가로 크기(padding, border 포함)
height : 요소의 세로 크기(padding, border 포함)
# 요소의 너비 높이 추출
offsetWidth, offsetHeight, clientWidth, clientHeight, scrollWidth, scrollHeight
- offsetWidth와 offsetHeight: 요소의 보더와 스크롤바를 포함한 전체 너비와 높이를 반환합니다.
- clientWidth와 clientHeight: 요소의 패딩을 포함한 콘텐츠 영역의 너비와 높이를 반환합니다.
- scrollWidth와 scrollHeight: 콘텐츠의 전체 너비와 높이를 반환합니다. (스크롤이 필요할 경우, 스크롤된 영역 포함)
offsetWidth와 getBoundingClientRect의 차이점
offsetWidth는 엘리먼트의 레이아웃 width(정수형)를 리턴하는 읽기 전용 프로퍼티입니다.
가상 선택자인 before, after를 제외한 모든 CSS width, border, padding, scrollbar 등을 포함해서 계산을 합니다.
만약 엘리먼트가 display: none 이거나 부모가 none 이면 0을 리턴합니다.
getBoundingClientRect 뷰포트에서 상대적인 엘리먼트의 크기를 리턴합니다.
엘리먼트 크기는 width, height + padding과 같습니다.
두 프로퍼티의 차이는 offsetWidth는 정수형 값으로 반올림하며 getBoundingClientRect는 소수점까지 값을 리턴합니다.
# new Event()
새로운 이벤트 객체를 생성하는 생성자 함수입니다. 이 생성자 함수를 사용하여 이벤트 객체를 만들 수 있습니다.
event = new Event(typeArg, eventInit);
typeArg: 생성할 이벤트의 종류를 지정하는 문자열입니다. 이는 이벤트의 유형을 나타내는 문자열로서, "click", "mouseover", "keydown" 등이 될 수 있습니다.
eventInit (선택적): 이벤트의 초기화 객체입니다. 주로 bubbles, cancelable 등의 속성을 설정할 때 사용됩니다.
# dispatchEvent 메서드
DOM 요소에 이벤트를 프로그래밍적으로 전달하는 데 사용. Event 객체를 인자로 받아 해당 이벤트를 발생시킵니다.
EventTarget 인터페이스에 속하는 모든 DOM 요소에서 사용할 수 있습니다. 이벤트를 수신할 수 있는 모든 DOM 요소, 즉 이벤트를 발생시킬 수 있는 요소에 dispatchEvent를 사용할 수 있습니다.
dispatchEvent를 사용하여 특정 이벤트를 발생시키면 이벤트가 버블링되어 상위 요소로 전파됩니다. 따라서 해당 요소에 이벤트 리스너가 등록되어 있는 경우 이벤트가 발생하고 해당 리스너가 실행됩니다.
형식)
//이벤트 생성
let clickEvent = new Event('click');
//생성된 이벤트 객체를 dispatchEvent() 메서드를 사용하여 DOM 요소에 전달하여 해당 이벤트를 발생
element.dispatchEvent(clickEvent);
function showMessage() {
box.innerText = "버튼이 클릭되었습니다.";
}
// 버튼에 클릭 이벤트 리스너 등록
button.addEventListener("click", showMessage);
// 이벤트를 트리거하여 버튼을 클릭한 것처럼 함
function triggerEvent() {
// 새로운 클릭 이벤트 생성
let event = new Event("click");
// 버튼에 생성한 이벤트를 전달
button.dispatchEvent(event);
// 이벤트를 발생시키는 것
}
// 함수 실행
triggerEvent()
# document.documentElement
- 속성:
- document.documentElement.scrollTop: 문서의 세로 스크롤 위치를 픽셀 단위로 나타냅니다.
- document.documentElement.scrollLeft: 문서의 가로 스크롤 위치를 픽셀 단위로 나타냅니다.
- document.documentElement.scrollHeight: 문서의 세로 스크롤 가능한 전체 높이를 픽셀 단위로 나타냅니다.
- document.documentElement.scrollWidth: 문서의 가로 스크롤 가능한 전체 너비를 픽셀 단위로 나타냅니다.
- 그 외에도 HTML 요소의 다양한 속성을 읽거나 변경할 수 있습니다.
- 메서드:
- document.documentElement.scrollTo(x, y): 문서를 지정된 좌표(x, y)로 스크롤합니다.
- document.documentElement.scrollBy(x, y): 현재 스크롤 위치에서 지정된 양(x, y)만큼 스크롤합니다.
- scrollTop:
- document.documentElement.scrollTop 속성은 문서의 가장 위쪽에서 스크롤된 거리를 나타냅니다. 픽셀 단위로 반환됩니다.
- 이 값을 변경하여 스크롤 위치를 조절할 수 있습니다. 예를 들어, document.documentElement.scrollTop = 0은 페이지의 맨 위로 스크롤합니다.
- scrollLeft:
- document.documentElement.scrollLeft 속성은 문서의 가장 왼쪽에서 스크롤된 거리를 나타냅니다. 픽셀 단위로 반환됩니다.
- 이 값을 변경하여 가로 스크롤 위치를 조절할 수 있습니다.
- scrollTo(x, y):
- document.documentElement.scrollTo(x, y) 메서드는 문서를 지정된 좌표(x, y)로 스크롤합니다.
- 예를 들어, document.documentElement.scrollTo(0, 0)은 페이지의 맨 위로 스크롤합니다.
- scrollBy(x, y):
- document.documentElement.scrollBy(x, y) 메서드는 현재 스크롤 위치에서 지정된 양(x, y)만큼 스크롤합니다.
- 양수 값은 아래쪽 및 오른쪽으로, 음수 값은 위쪽 및 왼쪽으로 스크롤합니다.
- scrollHeight:
- document.documentElement.scrollHeight 속성은 문서의 내용이 넘쳐나는 경우 전체 스크롤 가능한 높이를 나타냅니다.
- scrollWidth:
- document.documentElement.scrollWidth 속성은 문서의 내용이 넘쳐나는 경우 전체 스크롤 가능한 너비를 나타냅니다.
// 뷰포트 너비와 높이
let viewportWidth = document.documentElement.clientWidth;
let viewportHeight = document.documentElement.clientHeight;
// 문서의 전체 너비와 높이
let documentWidth = document.documentElement.scrollWidth;
let documentHeight = document.documentElement.scrollHeight;
// 문서의 오프셋 너비와 높이
let offsetWidth = document.documentElement.offsetWidth;
let offsetHeight = document.documentElement.offsetHeight;
console.log('Viewport Width: ' + viewportWidth);
console.log('Viewport Height: ' + viewportHeight);
console.log('Document Width: ' + documentWidth);
console.log('Document Height: ' + documentHeight);
console.log('Offset Width: ' + offsetWidth);
console.log('Offset Height: ' + offsetHeight);
'javascript+es6' 카테고리의 다른 글
| [ javascript ] 19. Object , JSON, Spread연산자, 나머지연산자, 옵셔널 체이닝 (0) | 2023.11.07 |
|---|---|
| [ javascript ] 18 . 함수 II (0) | 2023.11.06 |
| [ javascript ] 16. createElement , append, prepend , video, table (0) | 2023.10.15 |
| [ javascript ] 15. className , classList, getComputedStyle (0) | 2023.09.27 |
| [ javascript ] 14. this, target과 currentTarget, dataset, animate (0) | 2023.09.27 |