1. 요소의 인라인 스타일을 얻으십시오
코드 사본은 다음과 같습니다.
var obj = document.getElementById ( "테스트");
Alert (obj.height + "/n" + obj.width);
// 200px 200px typeof = String은 스타일 속성에 값을 표시합니다.
2. 계산 된 스타일을 얻으십시오
코드 사본은 다음과 같습니다.
var obj = document.getElementById ( "테스트");
var style = null;
if (window.getComputedStyle) {
style = window.getComputedStyle (obj, null); // 비이
} 또 다른 {
스타일 = obj.currentStyle; // 즉
}
alert ( "width =" + style.width + "/nheight =" + style.height);
참고 : 요소의 너비와 높이가 설정되지 않으면 기본 너비와 높이가 비 EI 브라우저에서 반환됩니다. IE에서 자동 문자열을 반환하십시오
3. <link> 및 <style> 태그로 작성한 스타일 받기
코드 사본은 다음과 같습니다.
var obj = document.stylesheets [0]; // [Object StylesheetList] 스타일 시트 수 <link> var Rule = NULL; // [Object CSSRULE]
if (obj.cssrules) {
규칙 = obj.cssrules [0]; // nonie [객체 cssrulelist]
} 또 다른 {
규칙 = obj.rules [0]; // 즉 [Object CSSRULELIST]
}
Alert (Rule.style.width);
CSSRULES (또는 규칙)는 인라인 및 링크 스타일의 너비와 높이 만 얻을 수 있으며 인라인 및 계산 된 스타일을 얻을 수 없습니다.
요약 : 요소 크기를 얻는 세 가지 방법은 요소의 CSS 크기 만 얻을 수 있지만 요소 자체의 실제 크기를 얻을 수는 없습니다. 예를 들어, 내부 마진, 스크롤 막대, 경계 등을 추가하십시오.
4. 요소의 실제 크기를 얻으십시오
1. ClientWidth 및 ClientHeight
이 속성 세트는 요소의 시각적 영역의 크기와 요소의 내용과 내부 마진이 차지하는 공간의 크기를 얻을 수 있습니다. 요소 크기를 반환하지만 장치는 없으며 기본 장치는 PX입니다. 100EM과 같은 장치를 강제로 설정하면 여전히 PX의 크기를 반환합니다. (CSS를 얻는 경우 설정 한 스타일에 따라 CSS를 얻게됩니다). 요소의 실제 크기에 대해 ClientWidth 및 ClientHeight는 다음과 같이 이해됩니다.
에이. 변경없이 경계를 추가하십시오.
비. 변화없이 마진을 증가시킵니다.
기음. 스크롤 막대를 늘리면 최종 값은 원래 크기에서 스크롤 막대의 크기를 뺀 것과 같습니다.
디. 내부 마진을 증가 시키면 최종 값은 원래 크기와 내부 마진과 동일합니다.
코드 사본은 다음과 같습니다.
<div id = "test"> </div>
#시험{
배경색 : 녹색;
너비 : 200px;
높이 : 200px;
테두리 : 단단한 5px 빨간색; / * 이해에 해당합니다. 결과 : 200,200 */
여백 : 10px; /* B 이해에 해당, 결과 : 200,200*/
패딩 : 20px; /* C 이해에 해당, 결과 : 240,240*/
오버플로 : 스크롤; / * D 이해에 해당하는 결과, 결과 : 223,223,223 = 200 (CSS 크기) + 40 (양쪽의 테두리 마진) -17 (스크롤 막대 너비) */
}
Window.onload = function () {
var obj = document.getElementById ( "테스트");
alert (obj.clientWidth + "," + obj.clientHeight);
};
참고 : CSS의 너비와 높이가 설정되지 않은 경우, Nonie 브라우저는 스크롤 막대의 계산 된 크기와 마진을 계산하고 IE 브라우저는 0을 반환합니다 (IE8은 고정 됨).
2. scrollwidth 및 scrollheight
이 속성 세트는 스크롤 컨텐츠의 요소 크기 (가시 콘텐츠)를 얻을 수 있습니다. 요소 크기를 반환하고 기본 장치는 px입니다. CSS 너비와 높이가 설정되지 않으면 계산 된 너비와 높이가 나타납니다. 요소의 실제 크기에 대해서는 Scrollwidth 및 ScrollHeight가 다음과 같이 이해됩니다.
1. 경계 추가, 다른 브라우저는 다른 설명을 가지고 있습니다 (다음은 IE8에서는 정상이지만 IE6은 제대로 작동하지 않습니다).
a) Firefox 및 Opera 브라우저는 국경의 크기, 220x220을 증가시킵니다.
b) IE, 크롬 및 사파리 브라우저는 국경 크기를 무시합니다, 200x200
c) IE 브라우저는 원래 콘텐츠의 높이 만 표시합니다. 200x18 (IE8 은이 문제를 수정했습니다)
2. 내부 마진을 추가하면 최종 값은 원래 크기와 내부 마진 크기 220x220과 동일하며 즉 220x38입니다.
3. 스크롤 막대를 추가하면 최종 값은 원래 크기와 스크롤 막대 크기, 184x184, 즉 184x18과 동일합니다.
4. 외부 데이터를 추가하고 변경 사항이 없습니다.
5. 콘텐츠 오버플로, 파이어 폭스, 크롬 및 즉, 실제 콘텐츠 높이를 얻고, 오페라는 처음 3 개의 브라우저에서 얻은 높이보다 작으며, 사파리는 처음 3 개의 브라우저에서 얻은 높이보다 큽니다.
3. Offsetwidth 및 Offesetheight
이 속성 세트는 경계, 내부 여백 및 스크롤 바를 포함한 요소의 실제 크기를 반환 할 수 있습니다. 요소 크기를 반환하고 기본 장치는 px입니다. CSS 너비와 높이가 설정되지 않으면 계산 된 너비와 높이가 나타납니다. 요소의 실제 크기에 대해서는 오프셋 폭과 오프 테일이 다음과 같이 이해됩니다.
1. 테두리를 추가하면 최종 값은 원래 크기와 테두리 크기 (220)와 같습니다.
2. 내부 마진을 추가하면 최종 값은 원래 크기와 내부 마진 크기 (220)와 동일합니다.
3. 외부 데이터 추가, 변경 사항 없음;
4. 스크롤 막대를 추가하고 변경 사항이 없으며 감소하지 않습니다.
요소 크기를 얻으려면 일반적으로 블록 레벨 요소이며 CSS 크기 요소를 설정하는 것이 더 편리합니다. 인라인 요소이거나 크기 세트가없는 요소 인 경우 특히 번거롭기 때문에 사용할 때주의를 기울이는 것이 좋습니다.
코드 사본은 다음과 같습니다.
<div id = "test"> 테스트 div 요소 </div>
#시험{
배경색 : 녹색;
너비 : 200px;
높이 : 200px;
테두리 : 단단한 10px 빨간색; /*결과 : 220,220*/
여백 : 10px; /*결과 : 220,220 (변경 없음)*/
패딩 : 10px; /*결과 : 240,240*/
오버플로 : 스크롤; /*결과 : 240,240 (변경 없음)*/
}
Window.onload = function () {
var obj = document.getElementById ( "테스트");
ALERT (obj.offsetWidth + "," + obj.offSetheight);
};
5. 요소의 주변 크기를 얻으십시오
1. ClientLeft 및 ClientTop은 테두리 크기를 얻습니다
이 속성 세트는 요소의 크기를 왼쪽 테두리와 상단 테두리를 얻을 수 있습니다. 현재 왼쪽 및 상단 그룹 만 사용할 수 있으며 오른쪽과 하단을 사용할 수 없습니다. 네면의 너비가 다른 경우 계산 된 스타일을 통해 직접 얻거나 위의 세 그룹을 사용하여 요소 크기를 얻기 위해 요소 크기를 얻을 수 있습니다.
오른쪽 테두리의 너비 : obj.offsetwidth-obj.clientwidth-obj.clientleft
하단 테두리의 너비 : obj.offsetheight-obj.clientheight-obj.clientTop
코드 사본은 다음과 같습니다.
<div id = "test"> 테스트 div 요소 </div>
#시험{
배경색 : 녹색;
너비 : 200px;
높이 : 200px;
테두리 : 단단한 10px 빨간색;
경계 오른쪽 : 솔리드 20px #00ff00;
국경-바닥 : 단단한 30px 블루;
왼쪽 경계 : 솔리드 40px #808080;
}
Window.onload = function () {
var obj = document.getElementById ( "테스트");
alert (obj.clientleft + "," + obj.clientTop); // 40,10
};
2. 오프셋 및 오프셋 탑
이 속성 세트는 부모 요소에 대한 현재 요소의 위치를 얻을 수 있습니다. 부모 요소에 비해 요소의 현재 위치를 얻으려면 위치 위치로 설정하는 것이 가장 좋습니다 : 절대; 그렇지 않으면 다른 브라우저마다 설명이 다릅니다.
에이. 위치를 절대로 설정하면 모든 브라우저는 동일한 값을 반환합니다. 좋다:
코드 사본은 다음과 같습니다.
<div id = "test"> 테스트 div 요소 </div>
#시험{
배경색 : 녹색;
너비 : 200px;
높이 : 200px;
위치 : 절대;
왼쪽 : 30px;
상단 : 20px;
}
Window.onload = function () {
var obj = document.getElementById ( "테스트");
ALERT (obj.offSetleft + "," + obj.offsetTop); // 30, 20
};
비. 테두리와 내부 마진을 추가해도 위치에는 영향을 미치지 않지만 외부 데이터를 추가하면 누적됩니다.
3. box.offsetparent가 부모 요소를 가져옵니다
오프셋 비교에서, 상위 요소 자체가 <hod> 인 경우, 비이는 신체 물체를 반환하고, 즉 (IE6)는 HTML 객체를 반환합니다. 두 요소가 중첩되면 위치 지정 위치 : 부모 요소에 절대가 사용되지 않으면 오프셋 비교가 바디 객체 또는 HTML 객체를 반환합니다. 따라서 OffsetLeft 및 OffSetTop을 얻을 때 CSS 포지셔닝이 매우 중요합니다.
많은 수준에서 외부 층이 배치 된 경우, 본체 또는 HTML 요소의 내부 층의 요소 사이의 거리를 어떻게 얻을 수 있습니까? 즉, 페이지에서 모든 요소의 위치를 가져옵니다. 그런 다음 우리는 기능을 작성하고 지속적으로 위로 추적하여 축적을 얻음으로써 달성 할 수 있습니다.
코드 사본은 다음과 같습니다.
Box.OffSetTop + Box.OffSetPent.OffSetTop; // 두 개의 레이어 만있을 때
함수 offsetLeft (요소) {
var left = element.offSetLeft; // 첫 번째 레이어 거리를 얻습니다
var parent = element.offsetparent; // 첫 번째 부모 요소를 얻습니다
while (parent! == null) {// 이전 상위 요소가있는 경우
왼쪽 += parent.OffSetLeft; //이 레이어의 거리를 추가하십시오
parent = parent.offsetparent; //이 레이어의 부모 요소를 가져옵니다
} // 그런 다음 루프를 계속하십시오
왼쪽으로 돌아갑니다.
}
4. 스크롤 탑 및 스크롤프
이 속성 세트는 숨겨진 스크롤 막대의 면적 크기 (스크롤 막대 위의 영역)를 얻거나 해당 영역에 위치하도록 설정할 수 있습니다. 스크롤 바를 초기 위치로 스크롤하려면 기능을 작성할 수 있습니다.
코드 사본은 다음과 같습니다.
함수 scrollstart (요소) {
if (element.scrolltop! = 0) {
요소 .scrolltop = 0;
}
}
5. GetBoundingClientRect ()
이 메소드는 왼쪽, 상단, 오른쪽 및 하단의 4 가지 속성을 가진 직사각형 객체를 반환합니다. 요소의 각 모서리와 페이지의 상단과 왼쪽 사이의 거리를 나타냅니다.
코드 사본은 다음과 같습니다.
var box = document.getElementById ( 'box'); // 요소를 얻습니다
alert (box.getBoundingClientRect (). 상단); // 요소 위의 거리는 페이지 상단에서입니다.
alert (box.getBoundingClientRect (). 오른쪽); // 페이지 왼쪽에서 요소의 오른쪽 거리까지
alert (box.getBoundingClientRect (). 하단); // 요소 아래의 거리는 페이지 상단에서
alert (box.getBoundingClientRect (). 왼쪽); // 페이지 왼쪽에서 요소의 왼쪽 거리까지
참고 : IE, Firefox3+, Opera9.5, Chrome 및 Safari 지원. 즉, 기본 좌표는 (2, 2)로부터 계산되어 다른 브라우저보다 두 픽셀의 최종 거리를 초래합니다. 우리는 호환되어야합니다.
코드 사본은 다음과 같습니다.
document.documentElement.clientTop; // 비이는 0, 즉 2입니다
document.documentElement.clientleft; // 비이는 0, 즉 2입니다
functionggetRect (요소) {
var rect = element.getBoundingClientRect ();
var top = document.documentElement.clientTop;
var left = document.documentElement.clientleft;
반품{
상단 : rect.top- 상단,
하단 : rect.bottom- 상단,
왼쪽 : rect.left- 왼쪽,
오른쪽 : rect.right- 왼쪽
}
}
모든 브라우저가 일관성이 있는지 테스트하기 위해 외부 가장자리, 내부 여백, 경계 및 스크롤 막대를 각각 추가하십시오.
위는이 기사에 설명 된 모든 내용입니다. 나는 당신이 그것을 좋아할 수 있기를 바랍니다.