jQuery - 스타일 메서드

jQuery 스타일 관련 메서드

jQuery 스타일 관련 메서드에 대해서 알려드리겠습니다.

---

CSS() 메서드

메서드 종류	설명
width()	요소의 가로 길이를 취득, 변경할 수 있습니다.
innerWidth()	padding이 적용된 요소의 가로 길이를 취득, 변경할 수 있습니다.
outerWidth()	border와 margin이 적용된 요소의 가로 길이를 취득, 변경할 수 있습니다. outerWidth()는 요소의 width 값 + 좌,우 border 값 outerWidth(true)는 요소의 width값 + 좌,우 margin 값
height()	요소의 높이를 취득 변경할 수 있습니다.
innerHeight()	padding이 적용된 요소의 높이를 취득, 변경할 수 있습니다.
outerHeight()	border와 margin이 적용된 요소의 높이를 취득, 변경할 수 있습니다. outerHeight()는 요소의 height값 + 상,하 border 값 outerHeight(true)는 요소의 height값 + 상, 하 border 값 + 상,하 margin 값

예시

CSS() 메서드를 이용해 간단한 예시로 보여드리겠습니다.

<script>
    $(document).ready(function() {
        $("div").eq(0).css({padding: 10, "text-align": "center"});
        $("div").css("width", function(index) {
            return index * 100 + 100; // 100, 200, 300
        });
    });
</script>

결과

width, height 관련 메서드

실행 분류	형식
제거	$("div").removeClass("클래스명");
콜백 함수	$("div").removeClass(function(index, className){     // index는 각 div 요소의 index 0, 1, 2     // className은 각 div의 class속성 m1, m2, m3     return class 속성 // 각 div에 속성을 제거 합니다. }); .... <div>내용1</div> <div>내용2</div> <div>내용3</div>

예시

width, heigh를 이용해 간단한 예시를 보여드리겠습니다.

<script>
    $(document).ready(function() {
        $("div").width(150).height(150);
        console.log("width 150" + $("div").width());
        console.log("height " + $("div").height());
        console.log("innerWidth " + $("div").innerWidth());
        console.log("innerHeight " + $("div").innerHeight());
        console.log("outerWidth " + $("div").outerWidth(true));
        console.log("outerHeight " + $("div").outerHeight(true));
    });
</script>

결과

위치 관련 메서드

메서드 종류	설명
offset()	$("div").offset().left $("div").offset().top $("div").offset({left:10, top:10})
position()	$("div").position().left $("div").position().top

예시

offset(), position() 메서드를 이용해 간단한 예시로 보여드리겠습니다.

<script>
    $(document).ready(function () {
        console.log($("#inner").offset().left);
        console.log($("#inner").offset().top);
        console.log($("#inner").position().left);
        console.log($("#inner").position().top);
    });
</script>

결과