차이점이 무엇인지 확인하기 위해 몇 가지 예제를 작성했지만 너비와 높이에 대해 동일한 결과를 표시합니다.
<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>이 예에서 동일한 결과를 출력하는 것을 볼 수 있습니다. 차이점이 무엇인지 아는 사람이 있으면 적절한 대답을 보여주세요.
감사.
답변
답변
주석에서 언급했듯이 문서 는 차이점이 무엇인지 정확하게 알려줍니다. 그러나 요약하면 :
- innerWidth / innerHeight-패딩을 포함하지만 테두리는 포함하지 않습니다.
- outerWidth / outerHeight-패딩, 테두리 및 선택적으로 여백 포함
- 높이 / 너비-요소 높이 (패딩 없음, 여백 없음, 테두리 없음)
답변
-
너비 = 너비 가져 오기,
-
innerWidth = 너비 + 패딩 가져 오기,
-
outerWidth = 너비 + 패딩 + 테두리 및 선택적으로 여백 가져 오기
테스트하려면 .test 클래스에 패딩, 여백, 테두리를 추가하고 다시 시도하십시오.
또한 jQuery 문서를 읽으십시오 … 필요한 모든 것이 거의 있습니다.
답변
값 할당에 대해 말하고 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 속성에 패딩이 포함되지 않습니다.”
답변
위에 주어진 모든 답변에 동의하십시오. 창 또는 브라우저 전망 측면에서 추가하기 위해 innerWidth/ innerheight창 내용 영역 만 포함됩니다.
outerWidth/ outerHeight 창 콘텐츠 영역을 포함하고 여기에 추가로 도구 모음, 스크롤바 등도 포함되며 이러한 값은 항상 innerWidth / innerHeight 값보다 크거나 같습니다.
더 많은 도움이되기를 바랍니다 …
답변
지금 제가보고 innerWidth있는 것은 전체 콘텐츠 를 포함하는 것입니다.
이것은 창이 900px있고 내용이있는 경우 1200px(그리고 스크롤이있는 경우)
innerWidth나에게 준다1200pxouterWidth나에게 준다900px
내 눈에는 전혀 예상치 못한
* 제 경우에는 콘텐츠가 <iframe>
답변
