jQuery/기본

4. 객체조작 - 수치조작 메소드

dev_jiwon 2022. 6. 8.

종류	사용법	설명
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(100).top;	선택한 요소의 포지션 위칫값을 반환합니다.
offset( )	$("요소선택").offset( ).left; $("요소선택").offset(100).top;	선택한 요소가 문서에서 수평/수직으로 얼마나 떨어져 있는지 떨어진 값을 반환합니다.
scrollLeft( )	$(window).scrollLeft( );	브라우저의 수직 스크롤 이동 넛빗값을 반환합니다.
scrollTop( )	$(window).scrollTop( );	브라우저의 수평 스크롤 이동 높잇값을 반환합니다.

[출처] 4_객체 조작|작성자 구름

width(), height(), innerWidth(), innerHeight(), outerWidth(), OuterHeight()

width() - 요소의 순수한 크기
innerWidth() - 요소의 width + padding 값
outerWidth() - 요소의 width + padding + border 값
outerWidth(true) - 요소의 width + padding + border + margin 값
--> outerWidth() 메서드에서 parameter로 true를 넘겨줄 경우

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>

    <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>

    <script>
        $(function(){
            var w1 = $("#box1").width();
            $("#t1").text("너비: " + w1);

            var w2 = $("#box1").innerWidth();
            $("#t2").text("너비: " + w2);

            var w3 = $("#box1").outerWidth();
            $("#t3").text("너비: " + w3);

            $("#box2").width("200").height("50")
                .css("border", "3px solid blue");
        });
    </script>
</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>
</html>

position()

선택한 요소의 포지션 위치 값을 반환

$("요소선택").position().left;

$("요소선택").position(100).top;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>

    <style>
        *{
            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>

    <script>
        $(function(){
            var top1 = $("#box").position().top;
            $("#t1").text(top1);

            var top2 =$("#box").offset().top;
            $("#t2").text(top2);
        });
    </script>

</head>
<body>
    <p id="t1"></p>
    <p id="t2"></p>
    <div id="wrap">
        <p id="box">박스1</p>
    </div>
</body>
</html>

offset()

선택한 요소가 문서에서 수평/수직으로 얼마나 떨어져 있는지 떨어진 값을 반환

$("요소선택").offset().left;

$("요소선택").offset(100).top;

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>

    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("h1").offset({left:100, top:1250});
            });
        });
    </script>
</head>
<body>
   <button>click</button>
   <h1>Lorem</h1> 
</body>
</html>

.offset()과 .position()의 차이점

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

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

메소드명	설명
.offset() 메소드	HTML 문서(HTML document)를 기준으로 함.
.position() 메소드	선택한 요소가 웹 페이지에 위치할 때 기준이 되는 부모 요소를 기준으로 함.

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

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

① 포지션이 기준이 되는 요소를 기준으로 선택한 요소의 위치 좌표값을 반환

② 문서 Document를 기준으로 선택한 요소의 위치 좌표값을 반환

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

jQuery offset() Method

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

https://api.jquery.com/offset/#offset-function

.offset() | jQuery API Documentation

Description: Get the current coordinates of the first element in the set of matched elements, relative to the document. The .offset() method allows us to retrieve the current position of an element (specifically its border box, which excludes margins) rela

api.jquery.com

scrollLeft() / scrollTop()

scrollLeft() - 브라우저의 수직 스크롤 이동 넓이 값을 반환

$(window).scrollLeft();

scrollTop() - 브라우저의 수평 스크롤이 이동 높이값을 반환

$(window).scrollTop();

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>

    <style type="text/css">
        body{
            height: 4000px;
        }
    </style>

    <script>
        $(function(){
            var scroll = $(window).scrollTop(2000);
            alert($(window).scrollTop());
        });
    </script>
</head>
<body>
    
</body>
</html>

스크롤 위치 메서드

브라우저의 스크롤바가 수직/수평으로 이동한 위치값을 불러오거나 변경할 때 사용

① $(요소선택).scrollTop(); / $(요소선택).scrollLeft();

② $(요소선택).scrollTop(새값); / $(요소선택).scrollLeft(새값);

① 스크롤바가 수직 또는 수평으로 이동한 위치값을 반환

② 입력한 수치만큼 수직 또는 수평으로 스크롤바를 이동

'jQuery > 기본' 카테고리의 다른 글

4. 객체 조작 - 예제 (0)	2022.06.09
4. 객체 조작 - 객체 편집 메서드 (0)	2022.06.09
4. 객체 조작 - 속성 조작 메소드 (0)	2022.06.08
step2 - 종합 (0)	2022.06.02
선택자 (0)	2022.05.31

4. 객체조작 - 수치조작 메소드

'jQuery > 기본' 카테고리의 다른 글

댓글

티스토리툴바