3
JavaScript의 다른 속성을 사용하여 문서의 크기와 그 번호를 얻는 방법에 대해 혼란 스럽습니다. 어떤 사람이 문서의 크기와 물건의 위치를 올바르게 얻는 방법을 이해하기 시작할 수있는 좋은 곳을 추천 할 수 있습니까?JavaScript의 문서 크기에 혼동이 있음
A
답변
15
최대한 간단하게 답변 드리겠습니다.
형상 측면,주의해야 할 크기의 두 가지가있다에서 문서 뷰포트
; 로드 된 페이지의 전체 크기 (창의 맨 아래에있는 내용과 창에 즉시 표시되는 문서의 보이는 부분의 크기를 반영하는 뷰포트 크기를 포함하여)를 반영하는 문서 크기.
아래로 스크롤하면 뷰포트가 문서 위로 일정한 수의 픽셀만큼 아래로 이동합니다. 즉, 뷰포트는 실제 브라우저 창 "테두리"(도구 모음, 메뉴, 탭 등)입니다.
브라우저와 모드에 따라 문서와 뷰포트의 크기를 가져 오는 데 여러 속성이 사용되며 스크롤 막대에 따라 다른 결과가 반환된다는 혼란이 있습니다. 그러나 우리는 이것으로 돌아올 것입니다.
치수 개요
에서 사용 가능한 곳의 호텔이 있습니다 얻 갈 당신에게 다른 차원을 줄 자바 스크립트.
화면 해상도 :
window.screen.width -Height가능한 화면 공간을 뺀 부두, 도구 모음 및 기타 UI 요소 (모니터 해상도와 동일) :
window.screen.availWidth -Height.문서 크기 :
document.documentElement.offsetWidth -Height참고 :이 숫자에는 스크롤바가 포함되어 있지 않습니다.뷰포트 크기 :
window.innerWidth -Height이 번호는 스크롤바를 포함한다.
는이 IE 8, IE9에서 사용할 수 없습니다, 그래서 IE의
document.compatMode === "CSS1Compat"및 true의 경우 테스트,document.documentElement.clientWidth -Height을 사용하고, 쿼크 모드 사용document.body.clientWidth -Height에 대한합니다. 문서 크기 위의 사항에 따라에 대한
주의 사항
document.documentElement.offsetWidth/Height 문서의 실제 크기를 제공합니다. 한 가지주의해야 할 점은 스크롤 막대는 브라우저간에 다르게 작동한다는 것입니다. 예를 들어 문서 높이가 뷰포트 높이보다 작은 경우에도 IE9는 항상 세로 스크롤 막대를 표시합니다. Safari/Chrome에는 OS X Lion에 스크롤 막대가 없습니다. PC의 Chrome은 필요하지 않은 경우 수직 스크롤바를 표시하지 않습니다.
따라서 불일치가 발생하여 Scrollbar shifts content 문제가 발생할 수 있습니다. 절대적으로 배치되고 중심에 위치하는 요소가 있다고 상상해보십시오. CSS는 뷰포트 크기가 아닌 문서 크기에 상대적으로 "중심"을 계산하므로 Google에서 스크롤 막대를 추가하면 "문서 센터"가 변경 될 때 콘텐츠가 왼쪽으로 조금씩 이동할 수 있습니다. 따라서 귀찮은 경우이 효과를 보완하기 위해 JS를 작성해야하거나 여기에있는 누군가가 스크롤바가 포함 된 문서 크기를 계산하는 빠른 JS 함수를 작성할 수 있습니다.
자바 스크립트에서 몇 가지 방법이 문서가 좌표와 함께 작업하는 동안
스크롤 막대의 위치 및 치수, 다른 뷰포트 좌표로 작업하고 자주 당신이 원하는 없습니다. 예를 들어, 문서 좌표에서 요소의 상단 가장자리가 문서 좌표에서 20 픽셀이고 페이지를 20 픽셀 아래로 스크롤하면 해당 요소의 상단 가장자리는 상단 뷰포트 좌표에 상대적인 0 픽셀입니다. 따라서 두 시스템간에 변환하려면 먼저 사용자가 문서를 스크롤 한 픽셀 수를 확인한 다음 해당 숫자를 뷰포트에 추가하여 보정해야합니다 (아래 예 참조).
는 또한 발견이 도움이 : 당신은 예를 들어 수var dimensions = (function(){
var dims = {};
// get screen width/height:
dims.screenWidth = function() { window.screen.width };
dims.screenHeight = function() { return window.screen.height };
// get screen width/height minus chrome:
dims.availWidth = function() { return window.screen.availWidth };
dims.availHeight = function() { return window.screen.availHeight };
// get document width/height (with-out scrollbars):
if (window.document.compatMode == "CSS1Compat"){ // if IE Standards Mode
dims.documentWidth = function() { return document.body.offsetWidth };
dims.documentHeight = function() { return document.body.offsetHeight };
}
else {
dims.documentWidth = function() { return document.documentElement.offsetWidth };
dims.documentHeight = function() { return document.documentElement.offsetHeight };
}
// get viewport width/height (with scrollbars):
if (window.innerWidth != null) {
dims.viewportWidth = function() { return window.innerWidth };
dims.viewportHeight = function() { return window.innerHeight };
}
// if IE in Standards Mode
else if (window.document.compatMode == "CSS1Compat"){
dims.viewportWidth = function() {
return window.document.documentElement.clientWidth
};
dims.viewportHeight = function() {
return window.document.documentElement.clientHeight
};
}
// get scrollbar offsets:
if (window.pageXOffset != null) {
dims.scrollXOffset = function() { return window.pageXOffset };
dims.scrollYOffset = function() { return window.pageYOffset };
}
// if IE in Standards Mode
else if (window.document.compatMode == "CSS1Compat"){
dims.scrollXOffset = function() { return document.documentElement.scrollLeft };
dims.scrollYOffset = function() { return document.documentElement.scrollTop };
}
return dims;
}());
을 :
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
http://www.quirksmode.org/mobile/viewports.html
그리고 여기에 내가 당신을 도울까지 청소 만 빠른 크로스 브라우저 모듈의 console.log(dimensions.viewportWidth())을 사용하여 뷰포트 너비를 가져옵니다.
희망이 도움이 되셨습니다. :)