jQuery 크기 알고리즘

1595 단어 jquery
우리는 기본적으로offsetWidth나offsetHeight로 값을 얻었지만 이 두 사이즈에 대한 알고리즘이 이렇다는 것을 알고 있다.
offsetWidth =  border-left-width + padding-left + width + padding-right + border-right-width; 
offsetHeight =  border-top-width + padding-top + height + padding-bottom + border-bottom-width;

박스-sizing:padding-box를 고려하지 않는 한 차이가 많지 않다.근데 사이즈에 대한 인터페이스가 또 있잖아요.
innerWidth, innerHeight, outerWidth, outerHeight 이런 유사한 처리요?물론 다 사이즈를 얻는 건 다르지만
innerWidth、 innerHeight
일치하는 집합의 첫 번째 원소를 얻는 데 사용되는 현재 계산의 내부 너비 (padding을 포함하지만 border는 포함하지 않음) 를 설정하거나 일치하는 원소의 내부 너비를 설정합니다.
outerWidth、outerHeight
원소 집합에서 첫 번째 원소의 현재 계산 너비 값을 가져옵니다.padding,border, 선택적인margin을 포함합니다.
이러한 상황에 대해 jQuery는 대응하는 값을 제거하는 방법을 제시해야 한다. 이것은 대응하는augment Width OrHeight 방법이다
어떻게 계산하는지 구체적으로 봅시다.
innerWidth = ele.offsetWidth –ele.borderRightWidth –ele.borderLeftWidth
innerHeight = ele.offseHeight –ele.borderTopHeight –ele.borderBottomHeight

4outerWidth 매개 변수를 전달하지 않으면 알고리즘은 innerWidth와 같다
outerWidth(true)를 전달하려면 margin을 추가해야 합니다.
outerWidth(true) = ele.offsetWidth + ele.marginLeft + ele.marginRight
outerHeigth(true) = ele.offsetHeigth + ele.marginTop + ele.marginBottom

jQuery 6 사이즈 방법에 대한 인터페이스 알고리즘이 이렇습니다.

좋은 웹페이지 즐겨찾기