jQuery_jquery에서 height innerHeight externalHeight 간의 차이에 대한 소개 예

표준 브라우저에서:

높이: 높이

innerHeight: 높이 + 패딩
outerHeight: 높이 + 패딩 + 테두리, 매개변수가 true인 경우: 높이 + 패딩 + 테두리 + 여백

html 코드:

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

< div 클래스 ="너비: 150px; 높이: 20px; 부동: 왼쪽; 테두리: 2px 단색 빨간색; 여백: 10px; 여백: 10px; 패딩: 10px;" id="test">jjjjj

js 코드:

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

Alert($(" #test").height());
alert($("#test").innerHeight())
alert($("#test").outerHeight()) ;
alert ($("#test").outerHeight(true));

결과:
결과: 17px, 37px, 41px, 61px
ff : 20px, 40px, 44px, 64px

html 코드:

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

jjjjj< ;/div>

js 코드:

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

alert($("#test").height())
alert($("#test").innerHeight()); ("#test").outerHeight());
alert($("#test").outerHeight(true))
[html]
결과: 17px , 37px, 41px, 61px
결과는 ff: 41px, 61px, 65px, 85px

html 코드:
[code]

jjjjj

js 코드:

코드 복사 코드는 다음과 같습니다. alert($("#test"). height());

alert($("#test").innerHeight())

alert($("#test").outerHeight()); test").outerHeight( true));


결과:
결과: ie: 18px, 38px, 42px, 62px
결과: ff: 42px, 62px, 66px, 86px

html 코드:




코드 복사

코드는 다음과 같습니다. < ;div class=" 너비: 150px; 높이: 60px; float: 왼쪽; 테두리: 2px 단색 빨간색; 여백: 10px; 패딩: 10px;" id="test">jjjjj

>

js 코드:

코드 복사

코드는 다음과 같습니다. alert($("#test").height()); alert($("#test").innerHeight()) alert($("#test").outerHeight() );

alert($ ("#test").outerHeight(true));

결과:
결과: 36px, 56px, 60px, 80px
in ff: 60px , 80px, 84px, 104px

결론: IE에서는 높이에 테두리와 패딩이 포함되며 높이의 최소값은 17px입니다. 같은 방법으로 너비를 얻을 수 있지만 최소값은 입니다. 15px.