출처 : https://www.w3schools.com 사이트의 내용을 공부하며 정리하고 있다.


jQuery는 윈도우 브라우저 요소의 면적, 치수를 쉽게 작업할 수 있다.
  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()


 정확히 어떤 부분을 나타내는 지는 아래 링크를 통해 쉽게 확인할 수 있다.


 https://www.w3schools.com/jquery/jquery_dimensions.asp


jQuery width() and height() 메소드 예제)

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
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var txt = "";
        txt += "Width of div : " + $("#div1").width() + "</br>";
        txt += "Height of div : " + $("#div1").height();
        $("#div1").html(txt);
    });
});
 
</script>
<style>
#div1 {
    height: 100px;
    width: 300px;
    padding: 10px;
    margin: 3px;
    border: 1px solid blue;
    background-color: lightblue;
}
</style>
</head>
<body>
 
<div id="div1"></div>
<br>
 
<button>Display dimensions of div</button>
 
</body>
</html>
 
cs


jQuery innerWidth() and innerHeight() 메소드

-> 위 두 메소드는 padding 값을 포함하여 값을 리턴한다. 

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
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var txt = "";
        txt += "Width of div : "      + $("#div1").width()          + "</br>";
        txt += "Height of div : "      + $("#div1").height()          + "</br>";
        txt += "InnerWidth of div "  + $("#div1").innerWidth()  + "</br>";
        txt += "InnerHeight of div " + $("#div1").innerHeight();
        $("#div1").html(txt);
    });
});
</script>
<style>
#div1 {
    height: 100px;
    width: 300px;
    padding: 10px;
    margin: 3px;
    border: 1px solid blue;
    background-color: lightblue;
}
</style>
</head>
<body>
<div id="div1"></div>
<br>
<button>Display dimensions of div</button>
</body>
</html>
 
cs



jQuery outerWidth() and outerHeight() 메소드

-> padding과 border를 포함한 요소의 가로 세로 값을 리턴한다.


jQuery More width() and height() 메소드

-> document와 window의 가로와 세로 값을 리턴할 수도 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var txt = "";
        txt += "$(document).width : "  + $(document).width()  + "\n";
        txt += "$(document).height : " + $(document).height() + "\n";
        txt += "$(window).width : "    + $(window).width()    + "\n";
        txt += "$(window).height : "   + $(window).height()   + "\n";
        alert(txt);
    });
});
</script>
</head>
<body>
 
<button>Display dimensions of document and window</button>
 
</body>
</html>
 
cs


저작자표시 비영리 변경금지

'문돌이의 IT > jQuery' 카테고리의 다른 글

jQuery Traversing 가로지르기? 횡단하기? (2) Descendants  (0) 2017.08.23
jQuery Traversing 가로지르기? 횡단하기? (1) ancestor  (0) 2017.08.22
jQuery css() 메소드  (0) 2017.08.19
jQuery Get and Set CSS 클래스들  (0) 2017.08.15
jQuery Remove 요소  (0) 2017.08.14

+ Recent posts

티스토리툴바