[jQuery] window 선택자 / 브라우저 창 크기 구하기

[jQuery] window 선택자 / 브라우저 창 크기 구하기

https://comymel.tistory.com/7

앞에서 제이쿼리에 이미 저장되어있는 선택자에 window, document, this가 있다고 했다. (위 포스팅 참고)

window선택자는 브라우저에 대한 선택자이다.

width()와 height()를 사용하면 크기를 알 수 있다.

브라우저창의 가로크기를 알고 싶다면 $(window).width();

세로크기를 알고싶다면 $(window).height();를 사용하면 된다.

ex)

$(document).ready(function(){

let windowWidth = $(window).width();

let windowHeight = $(window).height();

// 윈도우 창 가로세로 크기를 알 수 있는 명령을 변수에 저장

$('#box').css({

width: windowWidth,

height: windowHeight,

backgroundColor: 'lightyellow'

});

});

=> 출력결과

1. 창 크기를 화면의 반으로 파일을 열었을 때

2. 1.에서 창 크기를 키웠을 때 3. 창 크기를 최대로하고 파일을 열었을 때

위 결과에서 알 수 있듯이 처음 켜진 창 크기만큼만 속성이 적용된다.

처음에 창 크기가 작을 때 열어 그 크기만큼만 이미 속성이 적용되어 있는 상태이다.

그래서 창 크기를 키워도 처음 창 크기가 저장되어 있기 때문에 속성이 적용되는 부분의 크기가 변하지 않는다.

창 크기를 키우고 새로고침을 하거나 이미 창 크기가 최대화된 상태에서 파일을 열어야 크기에 맞게 속성이 적용된다.

from http://comymel.tistory.com/8 by ccl(A) rewrite - 2021-09-15 23:27:49