jQuery1.8_jquery의 몇 가지 작은 변경 사항에 대한 간략한 분석

1. .width() 및 .height() 메소드

1.8에는 CSS 속성 상자 크기 조정에 대한 지원이 추가되었습니다. 1.7.2와의 차이점에 유의하세요. 버전 1.7.2 이하에서는 상자 크기 정의 여부에 관계없이 border-box는 패딩과 테두리를 제외하고 상자 모델에 있는 요소 콘텐츠의 너비 또는 높이를 반환합니다.

1.8 이후에는 다릅니다. CSS 속성 box-sizing: box-border를 설정하면 width()를 사용하여 반환되는 값이 CSS에 설정된 값과 다를 수 있습니다. 예를 들어

코드 복사 코드는 다음과 같습니다.

< html>
                                                         box -sizing: border-box; ;
너비: 500px;
패딩: 5px; ;
                                                      >                                          > ;



box- of div[id=container] 크기 조정은 border-box로 설정됩니다(Firefox 14.1은 아직 border-box를 지원하지 않습니다. -moz-border-box를 사용하세요).

너비:500px 설정 외에도 패딩과 테두리도 각각 5px로 설정됩니다. 각 브라우저의 인쇄 결과는 다음과 같습니다

IE6/7: 500

IE8/9/10: 480

사파리5/6: 480

Chrome21/Firefox14: 480


IE6/7은 박스 크기 조정을 지원하지 않으며 출력은 여전히 ​​500입니다. 그러나 이러한 친숙성을 지원하는 브라우저의 출력 결과는 480이다(박스 모델의 테두리와 패딩이 제거됨). 따라서 1.8에서는 box-sizing 속성을 사용하여 발생하는 너비와 높이의 변화에 ​​주의해야 합니다.

2. .outerWidth 및 .outerHeight() 메소드

1.7.2 이하 버전에서는 externalWidth/outerHeight가 getter 역할만 합니다. true가 전달되지 않으면 요소의 너비 또는 높이(패딩 및 테두리 포함)가 반환됩니다. true가 전달되면(물론 숫자 1도 전달될 수 있음) 반환 값과 여백이 반환됩니다.

1.8 이상에는 setter 기능이 있어서 가져올 때 마진을 계산하려면 true만 전달할 수 있지만 숫자 1 등을 전달하면 처리되기 때문에 숫자 1 등을 전달할 수 없습니다. 내부적으로 jQuery에 의해 요소 너비와 높이를 설정합니다. 그리고 반환되는 것은 숫자가 아니라 jQuery 객체입니다(다른 jQuery setter와 동일).