js 소규모 클래스 라이브러리를 사용하여 브라우저 높이 및 너비 정보_javascript 기술 얻기

따라서 사용자가 DIV 레이어를 표시하기 위해 긴 내용이 있는 웹페이지에서 버튼을 클릭하면 아무런 효과가 없다는 것을 알게 됩니다(사실 이미 페이지 상단에 표시되어 있습니다). 따라서 준비가 필요합니다. 사용자의 현재 탐색 위치에 대한 정보. 이 요구 사항을 구현하기 전에 먼저 js에서 사용할 수 있는 도구를 살펴보겠습니다.

웹 페이지의 표시 영역 너비: document.body.clientWidth
웹 페이지의 표시 영역 높이: document.body.clientHeight; 웹 페이지의 가시 영역: document.body.offsetWidth " (가장자리 및 스크롤 막대의 너비 포함)"
웹 페이지의 가시 영역 높이: document.body.offsetHeight "; (가장자리 너비 포함)";
웹페이지 전체 텍스트 너비: document.body.scrollWidth;
웹페이지 전체 텍스트 높이: document.body .scrollHeight;
웹페이지가 스크롤되는 높이(ff): document.body.scrollTop
웹페이지가 스크롤되는 높이(예: document.documentElement.scrollTop)
문서가 스크롤되는 왼쪽; 웹페이지가 스크롤됩니다. ：document.body.scrollLeft;
웹페이지 본문 상단: window.screenTop
웹페이지 본문 왼쪽: window.screenLeft; 화면 해상도: window.screen.height;
화면 해상도 너비: window.screen.width;
화면 사용 가능 작업 영역 높이: window.screen.availHeight;
화면 사용 가능 작업 영역 너비: window.screen. availWidth;
화면 설정은 window .screen.colorDepth "비트 색상"입니다.
화면 설정은 window.screen.deviceXDPI "픽셀/인치"입니다.

이 정보는 인터넷에서 나온 것입니다. 비슷한 개념이 너무 많아서 미칠 것 같았지만 기술적인 사람으로서 여전히 끈질기게 읽고 어느 정도 이해했습니다. 스스로 이해하고 흡수한 후에는 높이나 너비 정보를 얻고 싶을 때마다 미칠 것 같은 느낌이 들었습니다. 따라서 브라우저의 이러한 속성을 다음과 같은 세 가지 개체에 따라 정렬하고 추상화했습니다. 유사한 속성이 너무 많아서 첫 번째는 페이지, 두 번째는 창, 세 번째는 뷰포트입니다. 사진을 보고 내 세 가지 물건의 의미를 이해하세요.

다음 세 가지 개념을 설명하세요.

페이지: 우리가 만드는 웹 페이지를 추상화한 것입니다. 높이는 일반적으로 브라우저 높이보다 높으며 너비는 일반적으로 브라우저 너비보다 작거나 같습니다.

브라우저 창: 우리가 사용하는 브라우저를 추상화한 것입니다. 메뉴 표시줄, 도구 모음, 북마크 표시줄, 상태 표시줄, 페이지 표시 영역 등이 포함됩니다. 따라서 높이는 확실히 뷰포트 높이보다 크거나 같고 너비는 확실히 뷰포트 너비보다 크거나 같습니다

뷰포트: 브라우저에서 페이지가 표시되는 영역입니다

이 세 가지 개념을 염두에 두고 이 "객체"의 높이와 너비를 얻기 위한 소규모 클래스 라이브러리를 작성해 보겠습니다.

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

var Browser = {
};
//페이지
Browser.Page = (function () {
return {
scrollTop: function () {
return Math.max(document.body.scrollTop, document.documentElement. scrollTop);
},
scrollLeft: function () {
return Math.max(document.body.scrollLeft, document.documentElement.scrollLeft)
},
height: function ( ) {
var _height;
if (document.compatMode == "CSS1Compat") {
_height = document.documentElement.scrollHeight;
} else {
_height = document.body.scrollHeight ;
}
return _height;
},
width: function () {
var _width
if (document.compatMode == "CSS1Compat") {
_width = document.documentElement.scrollWidth;
} else {
_width = document.body.scrollWidth;
}
return _width;
})() ;
//窗구：
Browser.Window = (function () {
return {
outerHeight: function () {
var _hei = window.outerHeight;
if (typeof _hei != "숫자") {
_hei = Browser.ViewPort.outerHeight();
}
return _hei;
},
outerWidth: function () {
var _wid = window.outerWidth;
if (typeof _wid != "number") {
_wid = Browser.ViewPort.outerWidth()
}
return _wid},
innerHeight; : function () {
var _hei = window.innerHeight;
if (typeof _hel != "number") {
_hei = Browser.ViewPort.innerHeight()
}
return _hei;
},
innerWidth: function () {
var _wid = window.innerWidth;
if (typeof _wid != "number") {
_wid = Browser.ViewPort.innerWidth ();
}
return _wid;
},
height: function () {
return Browser.Window.innerHeight()
},
width: 함수 () {
return Browser.Window.innerWidth()
}
}
})();
//视구:
Browser.ViewPort = (function () {
return {
innerHeight: function () {
var _height;
if (document.compatMode == "CSS1Compat") {
_height = document.documentElement.clientHeight;
} else {
_height = document.body.clientHeight;
}
return _height; >innerWidth: 함수 () {
var _width;
if (document.compatMode == "CSS1Compat") {
_width = document.documentElement.clientWidth
} else {
_width = document.body.clientWidth;
}
return _width;
},
outerHeight: function () {
var _height;
if (document.compatMode == "CSS1Compat") {
_height = document.documentElement.offsetHeight;
} else {
_height = document.body.offsetHeight;
}
return _height;
outerWidth; () {
var _width;
if (document.compatMode == "CSS1Compat") {
_width = document.documentElement.offsetWidth;
} else {
_width = document.body. offsetWidth;
}
return _width;
},
width: function () {
return Browser.ViewPort.innerWidth();
},
높이: function () {
return Browser.ViewPort.innerHeight();
}
}
})();


做几点说명:
1.浏览器(Opera、Chrome、FirFox、Safari)一样，已经能支持用window.innerHeight、window.innerWidth、window.outerHeight、window.outerWidth这四个属性获取浏览器的窗口、视取浏览器的窗俯、但是IE9 이전의 IE는 매우 유용했고, 이 정보는 아래에 있습니다.
2. 창에는 속도와 높이가 고정되어 있지 않습니다.是真正浏览器窗口정말 정확한 속도와 높이가 보장됩니다.
实例演示:
현재垂直内容过多 页面中，使一个DIV总能保持지금 中心位置(비精确中心位置)：

代码：




复主代码


代码如下:

window.onload = window.onresize = function () { var top = Math.round(Browser.Page.scrollTop() (Browser.ViewPort.height() / 2) - (parseInt(document.getElementById("divCenter").style.height) / 2))); var left = Math.round(Browser.Page.scrollLeft() (Browser.ViewPort.width() / 2) - (parseInt(document.getElementById("divCenter").style.width) / 2)); document.getElementById("divCenter").style.top = 상단 "px"; document.getElementById("divCenter").style.left = 왼쪽 "px";

}

大家测试时可以采用改变窗口大小的方式来查看。
时间不早了，晚安!

源代码下载
查看