웹페이지를 만드는 과정에서 웹페이지에 있는 요소의 정확한 위치를 알아야 할 때가 있습니다.
다음 튜토리얼은 웹 페이지 포지셔닝과 관련된 Javascript 관련 지식을 요약합니다.
1. 웹페이지의 크기와 브라우저 창의 크기
먼저, 두 가지 기본 개념을 명확히 해야 합니다.
웹 페이지의 전체 영역은 크기입니다. 일반적으로 웹페이지의 크기는 콘텐츠와 CSS 스타일 시트에 따라 결정됩니다.
브라우저 창의 크기는 브라우저 창에 표시되는 웹페이지 영역을 의미하며 뷰포트라고도 합니다.
분명히 웹 페이지의 내용이 브라우저 창에 완전히 표시될 수 있다면(즉, 스크롤 막대가 나타나지 않는 경우) 웹 페이지의 크기와 브라우저 창의 크기는 동일합니다. 전체 페이지를 표시할 수 없는 경우 브라우저 창을 스크롤하여 웹 페이지의 다양한 부분을 표시하세요.
2. 웹페이지 크기 확인
웹 페이지의 모든 요소에는 clientHeight 및 clientWidth 속성이 있습니다. 이 두 속성은 테두리와 스크롤 막대가 차지하는 공간을 제외하고 요소의 콘텐츠 부분과 패딩이 차지하는 시각적 영역을 나타냅니다.
(그림 1 clientHeight 및 clientWidth 속성)
따라서 문서 요소의 clientHeight 및 clientWidth 속성은 웹 페이지의 크기를 나타냅니다.
다음과 같이 코드 코드를 복사합니다.
함수 getViewport(){
if (document.compatMode == "BackCompat"){
반품 {
너비: document.body.clientWidth,
높이: document.body.clientHeight
}
} 또 다른 {
반품 {
너비: document.documentElement.clientWidth,
높이: document.documentElement.clientHeight
}
}
}
위의 getViewport 함수는 브라우저 창의 높이와 너비를 반환할 수 있습니다. 사용할 때 주의해야 할 세 가지 사항은 다음과 같습니다.
1) 이 함수는 페이지가 로드된 후에 실행되어야 합니다. 그렇지 않으면 문서 객체가 생성되지 않고 브라우저에서 오류를 보고합니다.
2) 대부분의 경우 document.documentElement.clientWidth는 올바른 값을 반환합니다. 그러나 IE6의 quirks 모드에서는 document.body.clientWidth가 올바른 값을 반환하므로 문서 모드에 대한 판단이 함수에 추가됩니다.
3) clientWidth 및 clientHeight는 모두 읽기 전용 속성이므로 값을 할당할 수 없습니다.
3. 웹페이지의 크기를 알아내는 또 다른 방법
웹 페이지의 각 요소에는 스크롤 막대를 포함한 요소의 시각적 영역을 참조하는 scrollHeight 및 scrollWidth 속성도 있습니다.
그러면 문서 객체의 scrollHeight 및 scrollWidth 속성은 웹 페이지의 크기, 즉 스크롤 막대의 전체 길이와 너비를 의미합니다.
getViewport() 함수 다음에 getPagearea() 함수를 작성할 수 있습니다.
다음과 같이 코드 코드를 복사합니다.
함수 getPagearea(){
if (document.compatMode == "BackCompat"){
반품 {
너비: document.body.scrollWidth,
높이: document.body.scrollHeight
}
} 또 다른 {
반품 {
너비: document.documentElement.scrollWidth,
높이: document.documentElement.scrollHeight
}
}
}
그런데 이 기능에는 문제가 있습니다. 웹 페이지의 콘텐츠가 스크롤 막대 없이 브라우저 창에 완전히 표시될 수 있는 경우 웹 페이지의 clientWidth 및 scrollWidth가 동일해야 합니다. 그러나 실제로 브라우저마다 처리 방법이 다르며 이 두 값이 반드시 동일하지는 않습니다. 따라서 그 중 더 큰 값을 취해야 하므로 getPagearea() 함수를 다시 작성해야 합니다.
다음과 같이 코드 코드를 복사합니다.
함수 getPagearea(){
if (document.compatMode == "BackCompat"){
반품 {
너비: Math.max(document.body.scrollWidth,
document.body.clientWidth),
높이: Math.max(document.body.scrollHeight,
document.body.clientHeight)
}
} 또 다른 {
반품 {
너비: Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth),
높이: Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight)
}
}
}
4. 웹 페이지 요소의 절대 위치를 얻습니다.
웹 페이지 요소의 절대 위치는 전체 웹 페이지의 왼쪽 위 모서리를 기준으로 한 요소의 왼쪽 위 모서리 좌표를 나타냅니다. 이 절대 위치는 계산을 통해 얻을 수 있습니다.
첫째, 각 요소에는 요소의 왼쪽 상단 모서리와 상위 컨테이너(offsetParent 객체)의 왼쪽 상단 모서리 사이의 거리를 나타내는 offsetTop 및 offsetLeft 속성이 있습니다. 따라서 요소의 절대 좌표를 얻으려면 이 두 값을 누적하면 됩니다.
(그림 2 offsetTop 및 offsetLeft 속성)
절대 위치의 가로 좌표와 세로 좌표를 구하려면 다음 두 가지 기능을 사용할 수 있습니다.
다음과 같이 코드 코드를 복사합니다.
함수 getElementLeft(요소){
var ActualLeft = element.offsetLeft;
var current = element.offsetParent;
while (현재 !== null){
ActualLeft += current.offsetLeft;
현재 = current.offsetParent;
}
실제왼쪽을 반환합니다.
}
함수 getElementTop(요소){
var ActualTop = element.offsetTop;
var current = element.offsetParent;
while (현재 !== null){
실제Top += current.offsetTop;
현재 = current.offsetParent;
}
실제 Top을 반환합니다.
}
테이블 및 iframe에서 offsetParent 개체가 반드시 상위 컨테이너와 동일할 필요는 없으므로 위 함수는 테이블 및 iframe의 요소에 적용되지 않습니다.
5. 웹페이지 요소의 상대적 위치를 얻습니다.
웹 페이지 요소의 상대 위치는 브라우저 창의 왼쪽 위 모서리를 기준으로 한 요소의 왼쪽 위 모서리 좌표를 나타냅니다.
절대 위치를 사용하면 상대 위치를 쉽게 얻을 수 있습니다. 절대 좌표에서 페이지 스크롤 막대의 스크롤 거리를 빼면 됩니다. 스크롤 막대의 세로 거리는 문서 객체의 scrollTop 속성이고, 스크롤 막대의 가로 거리는 문서 객체의 scrollLeft 속성입니다.
(그림 3 scrollTop 및 scrollLeft 속성)
이에 따라 이전 섹션의 두 함수를 다시 작성합니다.
다음과 같이 코드 코드를 복사합니다.
함수 getElementViewLeft(요소){
var ActualLeft = element.offsetLeft;
var current = element.offsetParent;
while (현재 !== null){
ActualLeft += current.offsetLeft;
현재 = current.offsetParent;
}
if (document.compatMode == "BackCompat"){
var elementScrollLeft=document.body.scrollLeft;
} 또 다른 {
var elementScrollLeft=document.documentElement.scrollLeft;
}
실제Left-elementScrollLeft를 반환합니다.
}
함수 getElementViewTop(요소){
var ActualTop = element.offsetTop;
var current = element.offsetParent;
while (현재 !== null){
실제Top += current.offsetTop;
현재 = current.offsetParent;
}
if (document.compatMode == "BackCompat"){
var elementScrollTop=document.body.scrollTop;
} 또 다른 {
var elementScrollTop=document.documentElement.scrollTop;
}
실제Top-elementScrollTop을 반환합니다.
}
scrollTop 및 scrollLeft 속성에 값을 할당할 수 있으며 웹 페이지를 해당 위치로 즉시 자동 스크롤하므로 웹 페이지 요소의 상대적 위치를 변경하는 데 사용할 수 있습니다. 또한 element.scrollIntoView() 메서드도 유사한 효과를 가지며, 이를 통해 웹 페이지 요소가 브라우저 창의 왼쪽 상단에 표시되도록 할 수 있습니다.
6. 요소의 위치를 얻는 빠른 방법
위의 기능 외에도 웹 페이지 요소의 위치를 즉시 가져오는 빠른 방법이 있습니다.
그것은 getBoundingClientRect() 메소드를 사용하는 것입니다. 이는 네 가지 속성(left, right, top, Bottom)을 포함하는 객체를 반환합니다. 이 속성은 각각 브라우저 창(뷰포트)의 왼쪽 상단 모서리를 기준으로 요소의 왼쪽 상단 모서리와 오른쪽 하단 모서리 사이의 거리에 해당합니다. .
따라서 웹페이지 요소의 상대적 위치는 다음과 같습니다.
다음과 같이 코드 코드를 복사합니다.
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;
스크롤 거리에 더해 절대 위치를 얻을 수 있습니다.
다음과 같이 코드 코드를 복사합니다.
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
현재 IE, Firefox 3.0+, Opera 9.5+는 모두 이 방법을 지원하지만 Firefox 2.x, Safari, Chrome, Konqueror에서는 지원하지 않습니다.