별의 블로그 :: 객체 조작 메서드

728x90

728x170

(2) 수치 조작 메서드

- 속성 조작 메서드와 성격이 비슷하지만, 선택한 요소의 수치 관련된 속성을 변경하거나 기존에 입력된 값을 불러올 때 사용.

- 예를 들어, 요소의 너비 또는 높이의 속성값을 바꾸거나 불러올 때 사용.

- 수치 조작 메서드

종류	사용법	설명
height()	$("요소 선택").height(); $("요소 선택").height(100);	안쪽 여백과 선을 제외한 높잇값을 반환하거나 변환
width()	$("요소 선택").width(); $("요소 선택").width(100);	안쪽 여백과 선을 제외한 너빗값을 반환하거나 변환
innerHeight()	$("요소 선택").innerHeight() $("요소 선택").innerHeight(300);	안쪽 여백을 포함한 높잇값을 반환하거나 변환
innerWidth()	$("요소 선택").innerWidth(); $("요소 선택").innerWidth(100);	안쪽 여백을 포함한 너빗값을 반환하거나 변환
outerHeight()	$("요소 선택").outerHeight(); $("요소 선택").outerHeight(100);	선과 안쪽 여백을 포함한 높잇값을 반환하거나 변환
outerWidth()	$("요소 선택").outerWidth(); $("요소 선택").outerWidth(100);	선과 안쪽 여백을 포함한 너빗값을 반환하거나 변환
position()	$("요소 선택").position().left; $("요소 선택").position().right;	선택한 요소의 포지션 위칫값 반환
offset()	$("요소 선택").offset().left; $("요소 선택").offset().top;	선택한 요소가 문서에서 수평/수직으로 얼마나 떨어져 있는지 떨어진 값 반환
scrollLeft()	$(window).scrollLeft();	브라우저의 수평 스크롤 이동 높잇값 반환
scrollTop()	$(window).scrollTop();	브라우저의 수직 스크롤 이동 너빗값 반환

1) 요소의 높이/너비 메서드

- height()와 width() 메서드는 여백 및 선 두께를 제외한 순수 요소의 높이와 너빗값을 계산.

- innerHeight()와 innerWidth() 메서드는 여백을 포함해 요소의 높이와 너빗값을 계산,

- outerHeight()와 outerWidth() 메서드는 여백 및 선을 포함해 요소의 높이와 너빗값을 계산.

- 예)

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
37
38
39
40
41

<!-- 문단 태그 영역 -->
<head>
~ 중략 ~
<style type="text/css">
    *{margin:0;padding:0;}
    body{margin:20px;}
    #box1{width:200px;height:100px;padding:5px;border:10px solid red;margin:10px}
</style>
</head>
<body>
    <p id="box1">박스1</p>
    <p id="t1"></p>
    <p id="t2"></p>
    <p id="t3"></p>
    <p id="box2">박스2</p>
</body>
 
<!-- 메서드 적용 -->
<script type="text/javascript">
    $(function(){
        var w1=$("#box1").width();
        // id="box1"인 요소에 순수 width 속성값을 가져와 변수 w1에 할당
        $("#t1").text("너비: ","+w1");
        // 변수 w1에 저장된 너빗값을 id="t1"인 요소에 텍스트로 출력
 
        var w2=$("#box1").innerWidth();
        // id="box1"인 요소에 패딩값을 포함한 너빗값을 변수 w2에 할당
        $("#t2").text("너비: ","+w2");
        // 변수 w2에 저장된 값을 id="t2"인 요소에 텍스트로 출력
 
        var w3=$("#box1").outerWidth();
        // id="box1"인 요소에 패딩과 보더값을 포함한 너빗값을 변수 w3에 할당
        $("#t3").text("너비: ","+w3");
        // 변수 w3에 저장된 값을 id="t3"인 요소에 텍스트로 출력
 
        $("#box2").width("200").height("50")
        // id="box2"인 요소의 너비를 200px로, 높이를 50px로 변경
        .css("border", "3px solid blue");
        // 3px의 파란색 선을 생성
    });
</script>
Colored by Color Scripter

cs

2) 요소 위치 메서드

- position() 메서드는 포지션 기준이 되는 요소를 기준으로 선택한 요소에서 가로/세로 떨어진 위치의 좌푯값을 반환하거나 변경할 때 사용.

- offset() 메서드는 문서(Document)를 기준으로 선택한 요소의 가로/세로 떨어진 위치 좌푯값을 반환하거나 변경할 때 사용.

- 기본형

$(요소 선택).positioN().[left | right | top | bottom]

$(요소 선택).offset().[left | top]

- 예)

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

<!-- 문단 태그 영역 -->
<head>
~ 중략 ~
<style type="text/css">
    *{margin:0;padding:0;}
    #wrap{width:300px;height:200px;background-color:#ccc;position:relative;top:50px;margin:0 auto;}
    #box{width:50px;height:50px;background-color:aqua;position:absolute;top:50px;left:100px;}
</style>
</head>
<body>
    <p id="t1"></p>
    <p id="t2"></p>
    <div id="wrap">
        <p id="box">박스1</p>
    </div>
</body>
 
<!-- 메서드 적용 -->
<script type="text/javascript">
    $(function(){
        var top1=$("#box1").position().top;
        // id="box"인 요소의 포지션 기준이 되는 <div id="wrap">인 요소를 기준으로 위에서부터 내려온 거릿값을 구해 top1에 할당
        $("#t1").text(top1);
 
        var top2=$("#box").offset().top;
        // id="box"인 요소의 문서 위에서부터 내려온 거릿값을 구해 변수 top2에 할당
        $("#2").text(top2);
    });
</script>
Colored by Color Scripter

cs

3) 스크롤바 위치 메서드

- scrollTop() 메서드는 브라우저의 스크롤바가 수직/수평으로 이동한 위칫값을 불러오거나 변경할 때 사용.

- 예)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!-- 문단 태그 영역 -->
<head>
~ 중략 ~
<style type="text/css">
    body{height:4000px;}
</style>
</head>
<body>
</body>
 
<!-- 메서드 적용 -->
<script type="text/javascript">
    $(function(){
      var s=$(window).scrollTop(2000);
      // 스크롤바를 2000px만큼 이동
      alert($(window).scrollTop());
      // 스크롤바의 현재 위칫값을 경고 창으로 출력
    });
</script>

cs

내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)

728x90

그리드형(광고전용)

저작자표시

'Programming > jQuery' 카테고리의 다른 글

이벤트 등록 메서드 - 마우스 이벤트 (0)	2017.05.23
이벤트 등록 메서드 - 로딩 이벤트 메서드 (0)	2017.05.23
이벤트 등록 메서드란? (0)	2017.05.23
객체 조작 메서드 - 객체 편집 메서드 (0)	2017.05.22
객체 조작 메서드 - 속성 조작 메서드 (0)	2017.05.22
선택자와 함께 사용하면 편리한 메서드들 (0)	2017.05.22
탐색 선택자 - 콘텐츠 탐색 선택자 (0)	2017.05.22
탐색 선택자 - 속성 탐색 선택자 (0)	2017.05.22