JavaScript는 요소 크기 및 크기 작업 요약_javascript 기술을 얻습니다.

1. 요소의 인라인 스타일을 가져옵니다

코드 복사 코드는 다음과 같습니다.

var obj = document.getElementById("test");
경고(obj.height "n" obj.width);
// 200px 200px typeof=string은 스타일 속성의 값만 표시합니다.

2. 계산된 스타일 가져오기

코드 복사 코드는 다음과 같습니다.

var obj = document.getElementById("test");
var 스타일 = null;
if (window.getCompulatedStyle) {
Style = window.getCompulatedStyle(obj, null); // IE가 아님
} 다른 {
스타일 = obj.currentStyle // IE
}
Alert("width=" style.width "nheight=" style.height);

참고: 요소의 너비와 높이가 설정되지 않은 경우 IE가 아닌 브라우저에서는 기본 너비와 높이가 반환됩니다. IE에서 자동 문자열

반환

3. 및

코드 복사 코드는 다음과 같습니다.

var obj = document.styleSheets[0]; // [object StyleSheetList] 스타일 시트 수var rule = null;// [object CSSRule]
if(obj.cssRules){
Rule = obj.cssRules[0]; // IE가 아님 [object CSSRuleList]
} 그 밖의 {
Rule = obj.rules[0]; // IE [객체 CSSRuleList]
}
경고(rule.style.width);

cssRules(또는 규칙)는 인라인 및 링크 스타일의 너비와 높이만 얻을 수 있고 인라인 및 계산된 스타일은 얻을 수 없습니다.

요약: 요소 크기를 얻는 위의 세 가지 CSS 방법은 요소의 CSS 크기만 얻을 수 있고 요소 자체의 실제 크기는 얻을 수 없습니다. 예를 들어 패딩, 스크롤 막대, 테두리 등을 추가합니다.

4. 요소의 실제 크기를 가져옵니다

1. 클라이언트 너비와 클라이언트 높이
이 속성 세트는 요소의 가시 영역 크기와 요소의 콘텐츠 및 패딩이 차지하는 공간을 가져올 수 있습니다. 요소 크기가 반환되지만 단위는 없습니다. 기본 단위는 px입니다. 100em과 같이 강제로 단위를 설정하면 여전히 px 크기가 반환됩니다. (CSS를 구하면 설정한 스타일에 따라 구하게 됩니다.) 요소의 실제 크기에 대해 clientWidth 및 clientHeight는 다음과 같이 이해됩니다.
a. 테두리 추가, 변경 없음
b. 여백 추가, 변경 없음
c. 스크롤 막대를 늘리면 최종 값은 원래 크기에서 스크롤 막대의 크기를 뺀 것과 같습니다.
d. 패딩을 늘리면 최종 값은 원래 크기에 패딩 크기를 더한 값과 같습니다.

코드 복사 코드는 다음과 같습니다.

#테스트{
배경색: 녹색;
너비: 200px;
높이: 200px;
테두리: 단색 5px 빨간색; /* 이해에 해당, 결과: 200,200 */
여백: 10px; /* b 이해에 해당, 결과: 200,200*/
패딩: 20px; /* c 이해에 해당, 결과: 240,240*/
Overflow: scroll; /* d 이해에 따라 결과는 223, 223, 223=200(css 크기) 40(양쪽 패딩) - 17(스크롤 막대 너비) */
}
window.onload = 함수(){
var obj = document.getElementById("test");
Alert(obj.clientWidth "," obj.clientHeight);
};

참고: CSS 너비와 높이가 설정되지 않은 경우 IE가 아닌 브라우저에는 계산된 스크롤 막대 및 패딩 크기가 포함되지만 IE 브라우저는 0을 반환합니다(IE8에서 수정됨).

2. 스크롤 너비와 스크롤 높이
이 속성 집합은 스크롤되는 콘텐츠(표시되는 콘텐츠)의 요소 크기를 가져올 수 있습니다. 요소 크기를 반환하며 기본 단위는 px입니다. CSS 너비와 높이를 설정하지 않으면 계산된 너비와 높이를 얻습니다. 요소의 실제 크기에 대해 scrollWidth 및 scrollHeight는 다음과 같이 이해됩니다.
1. 테두리를 추가하세요. 브라우저마다 다르게 해석됩니다. (다음은 IE8에서는 정상적으로 작동하지만 IE6에서는 작동하지 않습니다.)
a) Firefox 및 Opera 브라우저에서는 테두리 크기가 220x220으로 늘어납니다
b) IE, Chrome 및 Safari 브라우저는 테두리 크기인 200x200을 무시합니다
c) IE 브라우저는 원본 콘텐츠의 높이인 200x18만 표시합니다(IE8에서는 이 문제를 수정했습니다)
2. 패딩을 추가하면 최종 값은 원래 크기에 패딩 크기를 더한 220x220, IE는 220x38이 됩니다
3. 스크롤 막대를 추가하면 최종 값은 원본 크기에서 스크롤 막대 크기를 뺀 값인 184x184, IE는 184x18이 됩니다
4. 외부 국경 거점을 추가했습니다. 변경 사항은 없습니다.
5. 콘텐츠 오버플로 증가 Firefox, Chrome 및 IE는 실제 콘텐츠 높이를 얻습니다. Opera는 처음 세 브라우저보다 작은 높이를 얻고 Safari는 처음 세 브라우저보다 큰 높이를 얻습니다.

3. offsetWidth 및 offsetHeight
이 속성 집합은 테두리, 패딩 및 스크롤 막대를 포함하여 요소의 실제 크기를 반환할 수 있습니다. 요소 크기를 반환하며 기본 단위는 px입니다. CSS 너비와 높이를 설정하지 않으면 계산된 너비와 높이를 얻습니다. 요소의 실제 크기에 대해 offsetWidth 및 offsetHeight는 다음과 같이 이해됩니다.
1. 테두리를 추가하면 최종 값은 원래 크기에 테두리 크기를 더한 값인 220이 됩니다.
2. 패딩을 늘리면 최종 값은 원래 크기에 패딩 크기를 더한 값인 220이 됩니다.
3. 외부 국경 거점 추가, 변경 없음
4. 스크롤바를 추가하세요. 변화도 없고 감소도 없습니다.
요소 크기를 얻으려면 일반적으로 블록 수준 요소와 CSS 크기가 설정된 요소를 사용하는 것이 더 편리합니다. 특히 인라인 요소(inline)이거나 크기가 설정되지 않은 요소인 경우에는 문제가 되므로 사용 시 주의하는 것이 좋습니다.

코드 복사 코드는 다음과 같습니다.

div 요소 테스트

#테스트{
배경색: 녹색;
너비: 200px;
높이: 200px;
테두리: 단색 10px 빨간색 /*결과: 220,220*/
여백: 10px; /*결과: 220,220(변경 없음)*/
패딩: 10px; /*결과: 240,240*/
오버플로: 스크롤; /*결과: 240,240(변경 없음)*/
}
window.onload = 함수(){
var obj = document.getElementById("test");
​​ 경고(obj.offsetWidth "," obj.offsetHeight);
};

5. 요소의 주변 크기를 가져옵니다
1. clientLeft와 clientTop이 테두리 크기를 가져옵니다
이 속성 세트는 요소에 의해 설정된 왼쪽 테두리와 위쪽 테두리의 크기를 가져올 수 있습니다. 현재는 Left, Top 그룹만 제공되고 Right, Bottom 그룹은 제공되지 않습니다. 네 변의 폭이 다른 경우에는 계산된 스타일을 통해 직접 구할 수도 있고, 위의 세 그룹을 빼서 요소 크기를 구할 수도 있습니다.
오른쪽 테두리의 너비: obj.offsetWidth-obj.clientWidth-obj.clientLeft
아래쪽 테두리 너비: obj.offsetHeight-obj.clientHeight-obj.clientTop

코드 복사 코드는 다음과 같습니다.

div 요소 테스트

#테스트{
배경색: 녹색;
너비: 200px;
높이: 200px;
테두리 상단: 단색 10px 빨간색;s
테두리 오른쪽: 단색 20px #00ff00;
테두리 하단: 단색 30px 파란색;
테두리 왼쪽: 단색 40px #808080
}
window.onload = 함수(){
var obj = document.getElementById("test");
경고(obj.clientLeft "," obj.clientTop) // 40,10
};

2. offsetLeft 및 offsetTop
이 속성 세트는 상위 요소를 기준으로 현재 요소의 위치를 ​​얻을 수 있습니다. 상위 요소를 기준으로 요소의 현재 위치를 얻으려면 position:absolute로 설정하는 것이 가장 좋습니다. 그렇지 않으면 브라우저마다 다르게 해석됩니다.
a. 위치를 절대값으로 설정하면 모든 브라우저가 동일한 값을 반환합니다. 예:

코드 복사 코드는 다음과 같습니다.

div 요소 테스트

#테스트{
배경색: 녹색;
너비: 200px;
높이: 200px;
위치: 절대;
왼쪽: 30px;
상단: 20px;
}
window.onload = 함수(){
var obj = document.getElementById("test");
Alert(obj.offsetLeft "," obj.offsetTop) // 30, 20
};

b. 테두리와 패딩을 추가해도 위치에는 영향이 없지만 외부 패딩을 추가하면 합산됩니다.

3. box.offsetParent가 상위 요소를 가져옵니다
offsetParent에서 상위 요소가

인 경우 IE가 아닌 경우 본문 개체를 반환하고 IE(IE6)는 html 개체를 반환합니다. 두 요소가 중첩된 경우 상위 상위 요소가 position:absolute를 사용하지 않으면 offsetParent는 body 개체 또는 html 개체를 반환합니다. 따라서 offsetLeft 및 offsetTop을 얻을 때 CSS 위치 지정이 매우 중요합니다.
많은 레이어에서 외부 레이어가 배치된 경우 내부 레이어 요소와 본문 또는 html 요소 사이의 거리를 어떻게 알 수 있나요? 즉, 페이지에 있는 모든 요소의 위치를 ​​가져옵니다. 그런 다음 지속적으로 위쪽으로 역추적하여 누적을 달성하는 함수를 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

box.offsetTop box.offsetParent.offsetTop; //레이어가 2개만 있는 경우

함수 offsetLeft(요소){
var left = element.offsetLeft; // 첫 번째 레이어 거리 가져오기
var parent = element.offsetParent; // 첫 번째 상위 요소 가져오기
While (parent !== null) { // 이전 상위 요소가 있는 경우
           left = parent.offsetLeft; // 이 레이어의 거리를 누적합니다
         parent = parent.offsetParent; // 이 레이어의 상위 요소를 가져옵니다
} //그런 다음 루프를 계속합니다
왼쪽으로 돌아가세요;
}

4.scrollTop 및 scrollLeft
이 속성 세트는 스크롤 막대가 숨겨진 영역(스크롤 막대 위 영역)의 크기를 얻을 수 있으며 이 영역을 찾도록 설정할 수도 있습니다. 스크롤 막대를 초기 위치로 스크롤하려면 다음 함수를 작성하면 됩니다.

코드 복사 코드는 다음과 같습니다.

함수 scrollStart(요소) {
If ( element.scrollTop != 0 ) {
          element.scrollTop = 0;
}
}

5. getBoundingClientRect()
이 메서드는 왼쪽, 위쪽, 오른쪽, 아래쪽의 네 가지 속성을 포함하는 사각형 개체를 반환합니다. 요소의 각 측면과 페이지의 상단 및 왼쪽 측면 사이의 거리를 각각 나타냅니다.

코드 복사 코드는 다음과 같습니다.

var box=document.getElementById('box') // 요소 가져오기
Alert(box.getBoundingClientRect().top); // 요소 상단과 페이지 상단 사이의 거리
Alert(box.getBoundingClientRect().right); //요소의 오른쪽과 페이지의 왼쪽 사이의 거리
Alert(box.getBoundingClientRect().bottom); //요소 하단과 페이지 상단 사이의 거리
Alert(box.getBoundingClientRect().left); //요소 왼쪽과 페이지 왼쪽 사이의 거리

참고: IE, Firefox3, Opera9.5, Chrome 및 Safari가 지원됩니다. IE에서는 기본 좌표가 (2,2)로 계산되므로 최종 거리가 다른 브라우저보다 2픽셀 더 길어야 합니다. 호환되도록 합니다.

코드 복사 코드는 다음과 같습니다.

document.documentElement.clientTop; //비IE는 0, IE는 2
document.documentElement.clientLeft; //비IE는 0, IE는 2
functiongGetRect(요소) {
var ret = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left= document.documentElement.clientLeft;
복귀{
TOP: RECT.TOP -TOP,
하단 : ret.bottom - 상단,
왼쪽 오른쪽 : 직사각형.오른쪽 - 왼쪽
}
}

외부 여백, 내부 여백, 테두리 및 스크롤 막대를 각각 추가하여 모든 브라우저가 일관성이 있는지 테스트합니다.

위 내용은 이 글에 설명된 내용의 전부입니다. 마음에 드셨으면 좋겠습니다.