jQuery에서 width, innerWidth 및 outerWidth, height, innerHeight 및 outerHeight의 차이점은 무엇입니까?


124

차이점이 무엇인지 확인하기 위해 몇 가지 예제를 작성했지만 너비와 높이에 대해 동일한 결과를 표시합니다.

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var div = $('.test');
                var width = div.width(); // 200 px
                var innerWidth = div.innerWidth(); // 200px
                var outerWidth = div.outerWidth(); // 200px

                var height = div.height(); // 150 px
                var innerHeight = div.innerHeight(); // 150 px
                var outerHeight = div.outerHeight(); // 150 px
            });

        </script>
        <style type="text/css">
            .test
            {
                width: 200px;
                height: 150px;
                background: black;
            }
        </style>
    </head>
    <body>
        <div class="test"></div>
    </body>
</html>

이 예에서 동일한 결과를 출력하는 것을 볼 수 있습니다. 차이점이 무엇인지 아는 사람이 있으면 적절한 대답을 보여주세요.

감사.


8
jQuery 문서를 보셨습니까?
Brad M

1
에 패딩, 테두리 및 여백을 추가하고 <div>다른 결과를 제공하는지 확인하십시오.)
Niet the Dark Absol 2013-07-24

4
api.jquery.com/category/dimensions 해당 페이지는 모두를 설명하며 각각을 클릭하면 더 많은 정보를 제공합니다.
JClaspill 2013

Google에서 검색했지만 내 기대를 충족시키는 답변이 없습니다.
zajke jul

@BradM-사람이 없습니다. 그러나 "너비, innerWidth, outerWidth jquery 간의 차이"에 대한 결과는 본질적으로 나에게 아무것도 알려주지 않습니다.
zajke 2013

답변:



16

주석에서 언급했듯이 문서 는 차이점이 무엇인지 정확하게 알려줍니다. 그러나 요약하면 :

  • innerWidth / innerHeight-패딩을 포함하지만 테두리는 포함하지 않습니다.
  • outerWidth / outerHeight-패딩, 테두리 및 선택적으로 여백 포함
  • 높이 / 너비-요소 높이 (패딩 없음, 여백 없음, 테두리 없음)

4
  • 너비 = 너비 가져 오기,

  • innerWidth = 너비 + 패딩 가져 오기,

  • outerWidth = 너비 + 패딩 + 테두리 및 선택적으로 여백 가져 오기

테스트하려면 .test 클래스에 패딩, 여백, 테두리를 추가하고 다시 시도하십시오.

또한 jQuery 문서를 읽으십시오 ... 필요한 모든 것이 거의 있습니다.


2

값 할당에 대해 말하고 jq에서 "width"매개 변수의 의미에 대해 비교해야하는 것 같습니다 (new_value가 px 단위로 정의되어 있다고 가정).

jqElement.css('width',new_value);
jqElement.css({'width: <new_value>;'});
getElementById('element').style.width= new_value;

세 가지 명령어는 동일한 효과를 제공하지 않습니다 . 첫 번째 jquery 명령어가 innerwidth를 정의하기 때문입니다. "너비"가 아닌 요소 를 입니다. 이것은 까다 롭습니다.

동일한 효과를 얻으려면 먼저 패딩을 계산해야합니다 (var이 패드라고 가정). jquery가 순수한 js (또는 css 매개 변수 'width')와 동일한 결과를 얻기위한 올바른 명령어는 다음과 같습니다.

jqElement.css('width',new_value+pads);

다음 사항에 대해서도 알아볼 수 있습니다.

var w1 = jqElement.css('width');
var w2 = jqelement.width();

w1은 innerwidth이고 w2는 너비 (css 속성 의미) 차이이며 JQ API 문서에 문서화되지 않았습니다.

친애하는

Trebly


참고 : 제 생각에 이것은 버그 JQ 1.12.4로 간주 될 수 있습니다 .'parameters '뒤에 다양한 의미가 있기 때문에 나가는 방법은 .css ('parameter ', value)에 대해 허용되는 매개 변수 목록을 확실하게 소개하는 것입니다. 관심이 있지만 항상 명확해야합니다. 이 경우 : 'innerwidth'는 'width'와 동일하지 않습니다. 이 문제에 대한 추적을 .width (value) 문서에서 다음과 같은 문장으로 찾을 수 있습니다. "최신 브라우저에서는 CSS width 속성에 패딩이 포함되지 않습니다."


추가 트위스트 : .css('width')와 동일 .outerWidth()할 때 (즉, 그것의 경계뿐만 아니라, 패딩을 포함한다) box-sizing: border-box;.
Bob Stein

0

위에 주어진 모든 답변에 동의하십시오. 창 또는 브라우저 전망 측면에서 추가하기 위해 innerWidth/ innerheight창 내용 영역 만 포함됩니다.

outerWidth/ outerHeight 창 콘텐츠 영역을 포함하고 여기에 추가로 도구 모음, 스크롤바 등도 포함되며 이러한 값은 항상 innerWidth / innerHeight 값보다 크거나 같습니다.

더 많은 도움이되기를 바랍니다 ...


0

지금 제가보고 innerWidth있는 것은 전체 콘텐츠 를 포함하는 것입니다.

이것은 창이 900px있고 내용이있는 경우 1200px(그리고 스크롤이있는 경우)

  • innerWidth 나에게 준다 1200px
  • outerWidth 나에게 준다 900px

내 눈에는 전혀 예상치 못한

* 제 경우에는 콘텐츠가 <iframe>

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.