너비, 내부 너비 및 외부 너비, 높이, 내부의 차이높이 및 외부높이(jQuery)
차이점이 무엇인지 보기 위해 몇 가지 예를 작성했지만 너비와 높이에 대해 동일한 결과가 표시됩니다.
<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>
이 예제에서는 동일한 결과를 출력하는 것을 확인할 수 있습니다.차이점이 무엇인지 아는 사람이 있다면 적절한 답변을 보여주시기 바랍니다.
감사해요.
당신은 이 예시들을 보았습니까?당신의 질문과 비슷해 보입니다.
설명에서 언급한 것처럼 설명서는 정확하게 차이점이 무엇인지 알려줍니다.하지만 요약하자면:
- 내부 폭 / 내부높이 - 패딩을 포함하지만 테두리는 포함하지 않음
- 바깥쪽 폭 / 바깥쪽높이 - 패딩, 테두리 및 선택적으로 여백 포함
- 높이 / 너비 - 요소 높이(패딩 없음, 여백 없음, 테두리 없음)
width = 너비 가져오기,
내부 너비 = 너비 + 패딩 가져오기,
외부 너비 = 너비 + 패딩 + 테두리 및 선택적으로 여백 가져오기
테스트를 수행하려면 .test 클래스에 패딩, 여백, 테두리를 추가하고 다시 시도하십시오.
jQuery 문서도 읽어 보십시오...당신이 필요로 하는 모든 것이 거기에 있습니다.
제가 지금 보고 있는 것은innerWidth전체 내용 포함
이것은, 만약 창이900px그리고 그 내용은.1200px(그리고 스크롤이 있습니다)
innerWidth나에게 주는1200pxouterWidth나에게 주는900px
내 눈에는 전혀 예상치 못했던
*제 경우 내용은 a에 포함되어 있습니다.<iframe>
값 할당에 대해 말하고 jq : (new_value가 px 단위로 정의되었다고 가정할 때) "width" 매개 변수의 의미에 대해 비교할 필요가 있습니다.
jqElement.css('width',new_value);
jqElement.css({'width: <new_value>;'});
getElementById('element').style.width= new_value;
세 가지 명령어는 동일한 효과를 제공하지 않습니다. 첫 번째 jquery 명령어는 "폭"이 아닌 요소의 내부 폭을 정의하기 때문입니다.이거 까다롭네요.
동일한 효과를 얻으려면 padding을 계산해야 합니다(varis pads 가정). jquery가 순수 js(또는 css 매개 변수 'width')와 동일한 결과를 얻는 올바른 지침은 다음과 같습니다.
jqElement.css('width',new_value+pads);
다음에 대해서도 참고할 수 있습니다.
var w1 = jqElement.css('width');
var w2 = jqelement.width();
w1은 내부 너비이고, w2는 JQ API 문서에 문서화되지 않은 너비(css 속성 의미) 차이입니다.
안부 전합니다
트레블리
참고: 제 생각에 이것은 버그 JQ 1.12.4로 간주될 수 있습니다. 나가는 방법은 .css('parameter', value)에 대해 승인된 매개변수 목록을 명확하게 도입하는 것이어야 합니다. 왜냐하면 승인된 '매개변수' 뒤에는 관심이 있지만 항상 명확해야 하는 다양한 의미가 있기 때문입니다.이 경우: 'innerwidth'는 'width'와 동일하지 않습니다."현대 브라우저에서 CSS 너비 속성은 패딩을 포함하지 않습니다."라는 문장을 사용하여 이 문제를 .width(값)의 문서로 추적할 수 있습니다.
위에 제시된 모든 답변에 동의합니다.창 또는 브라우저 잠재 고객의 관점에서 추가하기만 하면 됩니다.innerWidth/ innerheight창 내용 영역만 포함하고 다른 내용은 포함하지 않습니다.
outerWidth/ outerHeightWindows 컨텐츠 영역을 포함하며, 이 영역 외에도 도구 모음, 스크롤 막대 등과 같은 영역도 포함합니다.이러한 값은 항상 내부 너비/내부보다 크거나 같습니다.높이 값.
더 많은 도움이 되길...
언급URL : https://stackoverflow.com/questions/17845027/what-is-difference-between-width-innerwidth-and-outerwidth-height-innerheight
'programing' 카테고리의 다른 글
| "string.split is not function" 오류의 원인은 무엇입니까? (0) | 2023.07.31 |
|---|---|
| 트랜잭션 내부의 SELECT 문과 트랜잭션 외부의 SELECT 문이 다릅니까? (0) | 2023.07.31 |
| 항법 컨트롤러의 투명 모달 뷰 (0) | 2023.07.31 |
| oracle 프로시저가 정수를 반환합니다. (0) | 2023.07.31 |
| jQuery append() - 추가된 요소 반환 (0) | 2023.07.31 |