윈도우 웹 브라우저로 실행된 창의 크기를 구할 수 있다.
웹 브라우저의 메뉴바와 툴바, 스크롤바 등이 전혀 포함되지 않은 윈도우 내부 영역 크기이다.
window.innerWidth
window.innerHeight
기본크기 + 메뉴바 + 툴바 영역 포함된 크기
$(window).width()
$(window).height()
기본크기 + 메뉴바 + 툴바 + 스크롤바 영역이 포함된 크기
window.outerWidth
window.outerHeight
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>윈도우 사이즈 구하기</title>
<script type="text/javascript" src="../../js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$info = $("#info");
var output = "Window()의 가로 크기 : " + $(window).width();
output += "<br>Window()의 세로 크기 : " + $(window).height();
output += "<br>innerWidth의 크기 : " + window.innerWidth;
output += "<br>innerHeight의 크기 : " + window.innerHeight;
output += "<br>outerWidth의 크기 : " + window.outerWidth;
output += "<br>outerHeight의 크기 : " + window.outerHeight;
$info.html(output);
});
</script>
</head>
<body>
<div id="info">
스크린의 크기 출력
</div>
<div id="main">
00<br>01<br>02<br>03<br>04<br>05<br>06<br>07<br>08<br>09<br>
10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>
20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>
30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>
40<br>41<br>42<br>43<br>44<br>45<br>46<br>47<br>48<br>49<br>
50<br>51<br>52<br>53<br>54<br>55<br>56<br>57<br>58<br>59<br>
60<br>61<br>62<br>63<br>64<br>65<br>66<br>67<br>68<br>69<br>
70<br>71<br>72<br>73<br>74<br>75<br>76<br>77<br>78<br>79<br>
80<br>81<br>82<br>83<br>84<br>85<br>86<br>87<br>88<br>89<br>
90<br>91<br>92<br>93<br>94<br>95<br>96<br>97<br>98<br>99<br>
</div>
</body>
</html>
728x90
반응형
'HTML > Javascript 기초' 카테고리의 다른 글
| [Javascript] 윈도우 창 크기 변경하고 이동하기 (0) | 2020.08.06 |
|---|---|
| [Javascript] 스크롤 위치 구하기 (0) | 2020.08.06 |
| [Javascript] 전체 화면(스크린) 크기 구하기 (0) | 2020.08.06 |
| [Javascript] HTML 문서의 크기 구하기 (0) | 2020.08.06 |
| [Javascript] HTML 요소의 크기 다루기 - 3 (0) | 2020.08.06 |
