jQuery에서 width, innerWidth 및 outerWidth, height, innerHeight 및 outerHeight의 차이점은 무엇입니까?
차이점을 확인하기 위해 몇 가지 예를 작성했지만 너비와 높이에 대해 동일한 결과를 표시합니다.
<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 = get width + padding,
outerWidth = get width + padding + border and optionally the margin
If you want to test add some padding, margins, borders to your .test classes and try again.
Also read up in the jQuery docs... Everything you need is pretty much there
It seems necessary to tell about the values assignations and compare about the meaning of "width" parameter in jq : (assume that new_value is defined in px unit)
jqElement.css('width',new_value);
jqElement.css({'width: <new_value>;'});
getElementById('element').style.width= new_value;
The three instructions doesn't give the same effect: because the first jquery instruction defines the innerwidth of the element and not the "width". This is tricky.
To get the same effect you must calculate the paddings before (assume var is pads), the right instruction for jquery to obtain the same result as pure js (or css parameter 'width') is :
jqElement.css('width',new_value+pads);
We can also note that for :
var w1 = jqElement.css('width');
var w2 = jqelement.width();
w1 is the innerwidth, while w2 is the width (css attribute meaning) Difference which is not documented into JQ API documentation.
Best regards
Trebly
참고 : 제 생각에 이것은 버그 JQ 1.12.4로 간주 될 수 있습니다. 외출하는 방법은 'parameters'뒤에 다양한 의미가 있기 때문에 .css ( 'parameter', value)에 허용되는 매개 변수 목록을 결정하는 것입니다. 관심이 있지만 항상 명확해야합니다. 이 경우 'innerwidth'는 'width'와 동일하지 않습니다. 다음과 같은 문장으로 .width (value) 문서에서이 문제를 추적 할 수 있습니다. "현대 브라우저에서는 CSS 너비 속성에 패딩이 포함되어 있지 않습니다."
'Programing' 카테고리의 다른 글
| Rails 5 : 프로덕션 환경에서 lib 파일로드 (0) | 2020.07.30 |
|---|---|
| id ()로 객체를 가져 옵니까? (0) | 2020.07.30 |
| .htaccess에서 하나의 특정 폴더에 대한 액세스 거부 (0) | 2020.07.30 |
| 파이썬에서 n 그램, 4, 5, 6 그램? (0) | 2020.07.30 |
| Laravel 5의 모든 뷰에 데이터를 전달하는 방법은 무엇입니까? (0) | 2020.07.30 |