jQuery + Box Model

 

 

 

1. css 속성

    <script>
        //읽기
        //(단위가 붙은)문자열로 반환한다.
        console.log('width', $('#box').css('width'));
        console.log('height', $('#box').css('height'));
        $('#box').css('width', '300px');

    </script>

 

 

2. 제이쿼리 전용 메소드

 

        //(단위를 생략한)숫자형으로 반환한다.(단위는 px 기본값)
        console.log('width()', $('#box').width());
        console.log('height()', $('#box').height());
        $('#box').height(300);

 

 

 

 

padding 을 더한 것이 실제 태그의 영역이라서 innerWidth로 제공한다.

width/height + padding > 사각형 내부 크기

console.log('innerWidth()', $('#box').innerWidth());    //260
console.log('innerHeight()', $('#box').innerHeight());  //260

 

시각적으로 보이는 상자의 크기를 표현할 때

width/height + padding + border

console.log('outerWidth()', $('#box').outerWidth());    //300   
console.log('outerHeight()', $('#box').outerHeight());  //300

 

사각형이 차지하는 영역의 크기

width/height + padding + border + margin

console.log('outerWidth(true)', $('#box').outerWidth(true));    //400   
console.log('outerHeight(true)', $('#box').outerHeight(true));  //400