jQuery element area 요소의 영역

---

요소의 크기

제이쿼리는 선택한 요소의 크기에 관한 정보를 손쉽게 받아오거나 설정할 수 있도록 다양한 메서드를 제공

inner와 outer

• 접두사로 inner가 붙은 메서드는 선택한 요소의 크기에 패딩(padding) 영역이 포함된 크기 정보를 반환
• 접두사로 outer가 붙은 메서드는 패딩 영역뿐만 아니라 테두리(border) 영역까지 포함된 크기 정보를 반환
• 또한, 접두사로 outer가 붙은 메서드에 인수로 true 값을 전달하면, 패딩과 테두리 영역뿐만 아니라 마진(margin) 영역까지 포함된 크기 정보를 반환

메서드	반환값
.width(), .height()	요소의 크기
.innerWidth(), .innerHeight()	요소의 크기 + 패딩(padding)의 크기
.outerWidth(), .outerHeight()	요소의 크기 + 패딩의 크기 + 테두리(border)의 크기
.outerWidth(true), .outerHeight(true)	요소의 크기 + 패딩의 크기 + 테두리의 크기 + 마진(margin)의 크기

$(function() {

    $("button").on("click", function() {
        let str = "이 div 요소의 ";
        str += "너비는 " + $("#divBox").width() + "픽셀이고,<br>"; // id가 "divBox"인 요소의 너비를 반환함.
        str += "높이는 " + $("#divBox").height() + "픽셀입니다."   // id가 "divBox"인 요소의 높이를 반환함.
        $("#text").html(str);
    });
});

// 이 메서드들을 이용하면 브라우저의 뷰포트(viewport)나 HTML 문서의 크기도 알아낼 수 있습니다.
$(function() {
    $("button").on("click", function() {
        let str = "";
        str += "브라우저 뷰포트의 크기는 " + $(window).width() + "X" + $(window).height() + "입니다.<br>";
        str += "HTML 문서의 크기는 " + $(document).width() + "X" + $(document).height() + "입니다.";
        $("#text").html(str);
    });
});

// .width()와 .height() 메서드가 호출될 때 인수를 전달받으면, 선택된 요소의 크기를 인수로 전달받은 값으로 설정
$(function() {
    $("button").on("click", function() {
        $("#divBox").width("400");  // id가 "divBox"인 요소의 너비를 설정함.
        $("#divBox").height("200"); // id가 "divBox"인 요소의 높이를 설정함.
    });
});

$(function() {
    $("button").on("click", function() {
        let str = "이 div 요소의 ";
        // id가 "divBox"인 요소의 크기를 반환함.
        str += "크기는 " + $("#divBox").width() + "X" + $("#divBox").height() + "이고,<br>";
        // id가 "divBox"인 요소의 패딩 영역을 포함한 크기를 반환함.
        str += "패딩 영역을 포함한 크기는 " + $("#divBox").innerWidth() +
            "X" + $("#divBox").innerHeight() + "이고,<br>";
        // id가 "divBox"인 요소의 패딩 영역과 테두리를 포함한 크기를 반환함.
        str += "테두리까지 포함한 크기는 " + $("#divBox").outerWidth() +
            "X" + $("#divBox").outerHeight() + "이고,<br>";
        // id가 "divBox"인 요소의 패딩 영역과 테두리, 마진 영역까지 포함한 크기를 반환함.
        str += "마진 영역까지 포함한 크기는 " + $("#divBox").outerWidth(true) +
            "X" + $("#divBox").outerHeight(true) + "입니다.";
        $("#text").html(str);
    });
});

요소의 위치

제이쿼리는 선택한 요소의 위치 정보를 손쉽게 얻을 수 있도록 다양한 메서드를 제공

.offset()

• 선택한 요소 집합의 첫 번째 요소의 위치를 HTML 문서를 기준으로 반환
• 메서드가 호출될 때 인수를 전달받으면, 선택한 요소의 위치를 인수로 전달받은 값으로 설정

$(function() {
    $("button").on("click", function() {
        let paraPosition = $("#para").offset(); // id가 "para"인 요소의 위치 정보를 저장함.
        let str = "p 요소의 위치는 ";
        str += "left가 " + paraPosition.left + "픽셀이고,<br>"; // id가 "para"인 요소의 left 위치를 반환함.
        str += "top은 " + paraPosition.top + "픽셀입니다.";     // id가 "para"인 요소의 top 위치를 반환함.
        $("#text").html(str);
    });
});

$(function() {
    $("button").on("click", function() {
        $("#para").offset({ top: 200, left: 100 }); // id가 "para"인 요소의 위치를 설정함.
        let paraPosition = $("#para").offset();     // id가 "para"인 요소의 위치 정보를 저장함.
        let str = "p 요소의 위치는 ";
        str += "left가 " + paraPosition.left + "픽셀이고,<br>"; // id가 "para"인 요소의 left 위치를 반환함.
        str += "top은 " + paraPosition.top + "픽셀입니다.";     // id가 "para"인 요소의 top 위치를 반환함.
        $("#text").html(str);
    });
});

.position()

• .offset() 메서드와는 달리, 선택한 요소가 웹 페이지에 위치할 때 기준이 되었던 부모 요소(offset parent)를 기준으로 하는 상대 위치를 반환

$(function() {
    $("button").on("click", function() {
        let str = "";
        let offsetPosition = $("#para").offset(); // offset() 메서드를 사용해 id가 "para"인 요소의 위치 정보

        str += "offset() 메서드를 사용해 구한 p 요소의 위치는<br>";
        str += "left가 " + offsetPosition.left + "픽셀이고, ";    // id가 "para"인 요소의 left 위치를 반환함.
        str += "top은 " + offsetPosition.top + "픽셀입니다.<br>"; // id가 "para"인 요소의 top 위치를 반환함.

        let posPosition = $("#para").position();  // position() 메서드를 사용해 id가 "para"인 요소의 위치 정보

        str += "position() 메서드를 사용해 구한 p 요소의 위치는<br>";
        str += "left가 " + posPosition.left + "픽셀이고, ";       // id가 "para"인 요소의 left 위치를 반환함.
        str += "top은 " + posPosition.top + "픽셀입니다.";        // id가 "para"인 요소의 top 위치를 반환함.

        $("#text").html(str);
    });
});

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

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

기준이 되는 조상 요소
.position() 메서드에서 기준으로 사용되는 부모 요소는 .offsetParent() 메서드를 사용하여 확인할 수 있습니다.

$(function() {
    $("button").on("click", function() {
        // id가 "para"인 요소가 위치할 때 기준이 된 조상 요소를 선택함.
        $("#para").offsetParent()
            .css("border", "1px solid red"); // 해당 요소의 CSS 스타일을 변경함.
    });
});

• 위 예제에서 아이디가 "para"인 요소를 웹 페이지에 위치시킬 때 기준이 되는 부모 요소는 position 속성값이 relative로 설정된 <ul>요소
• 이렇게 정적 위치(static position) 지정 방식을 제외한 다른 방식(relative, fixed, absolute)으로 위치가 설정된 요소가 위치를 정할 때 기준이 될 수 있음
• 만약 위와 같은 위치가 설정된 요소가 존재하지 않으면, <html>요소를 기준

.scrollLeft()와 .scrollTop()

• .scrollLeft() : 선택한 요소 집합의 첫 번째 요소의 수평 스크롤 바의 현재 위치를 얻거나, 해당 요소의 수평 스크롤 바의 위치를 인수로 전달받은 값으로 설정
• .scrollTop() : 선택한 요소 집합의 첫 번째 요소의 수직 스크롤 바의 현재 위치를 얻거나, 해당 요소의 수직 스크롤 바의 위치를 인수로 전달받은 값으로 설정

// 아이디가 divBox인 요소의 수평 스크롤 바와 수직 스크롤 바의 현재 위치를 출력하는 예제
$(function() {
    $("button").on("click", function() {
        // id가 "divBox"인 요소의 수평 스크롤 바의 현재 위치를 반환함.
        let str = "수평 스크롤 바의 현재 위치는 left 방향으로 " + $("#divBox").scrollLeft() + "픽셀이고,<br>";
        // id가 "divBox"인 요소의 수직 스크롤 바의 현재 위치를 반환함.
        str += "수직 스크롤 바의 현재 위치는 top 방향으로 " + $("#divBox").scrollTop() + "픽셀입니다.";
        $("#text").html(str);
    });
});

// 아이디가 divBox인 요소의 수평 스크롤 바와 수직 스크롤 바의 위치를 직접 설정하는 예제
$(function() {
    $("button").on("click", function() {
        $("#divBox").scrollLeft(70); // id가 "divBox"인 요소의 수평 스크롤 바의 위치를 설정함.
        $("#divBox").scrollTop(200); // id가 "divBox"인 요소의 수직 스크롤 바의 위치를 설정함.

        // id가 "divBox"인 요소의 수평 스크롤 바의 현재 위치를 반환함.
        let str = "수평 스크롤 바의 현재 위치는 left 방향으로 " + $("#divBox").scrollLeft() + "픽셀이고,<br>";
        // id가 "divBox"인 요소의 수직 스크롤 바의 현재 위치를 반환함.
        str += "수직 스크롤 바의 현재 위치는 top 방향으로 " + $("#divBox").scrollTop() + "픽셀입니다.";
        $("#text").html(str);
    });
});

 

Reference

https://www.tcpschool.com/jquery/jq_elementTraversing_etc

코딩교육 티씨피스쿨