본문 바로가기

Development/JavaScript

[JavaScript] 화면 리사이즈 시 높이 구하기


스크립트를 이용해 해당 id를 가진 div의 높이를 구하여 화면 너비가 변경될 때 마다 높이를 변경.



1. 스크립트 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
    var height; // 변수선언
 
    // 페이지 로드시 자동실행
    $(window).ready(function () {
        height = document.getElementById("id").offsetHeight+'px';
        // 페이지 로드시 id값의 div의 높이를 구함
 
        document.getElementById("id").style.height = height;
        // 높이를 id 의 height 값에 저장
 
        console.log("load height : " + height);
    });
 
 
    // 화면 리사이즈시 실행
    $(window).resize(function () {
        height = document.getElementById("id").offsetHeight+'px';
        // 화면 리사이즈 시 id값의 div의 높이를 구함
 
        document.getElementById("id").style.height = height;
        // 화면 리사이즈시 id의 height값 변경 후 저장
 
        console.log("resize height : " + height);
    });
</script>
cs



2. 실행결과

1
2
3
4
5
6
7
8
9
10
11
load height : 283px
resize height : 283px
resize height : 319px
resize height : 283px
resize height : 373px
resize height : 354px
resize height : 319px
resize height : 283px
resize height : 319px
resize height : 300px
resize height : 283px
cs


load height : 페이지가 로딩될 때의 높이

resize height : 페이지 너비가 리사이즈 될 때의 높이