Home > Web Front-end > JS Tutorial > Javascript implementation to obtain the size and position of the window code sharing_javascript skills

Javascript implementation to obtain the size and position of the window code sharing_javascript skills

WBOY
Release: 2016-05-16 16:29:11
Original
1431 people have browsed it

In Javascript, you can use OuterWidth and OuterHeight to get the size of the browser. Use innerWidth and innerHeight to get the size of the window (excluding the browser border). For IE6 and previous versions, it is necessary to distinguish between standard mode and mixed mode. Standard mode uses document.documentElement.clientWidth, document.documentElement.clientHeight; mixed mode uses document.body's clientWidth, clientHeight.

Copy code The code is as follows:

(function () {
        var pageWidth = window.innerWidth;
        var pageHeight = window.innerHeight;
        var broswerWidth = window.outerWidth;
        var broswerHeight = window.outerHeight;
alert(pageWidth " " pageHeight);
alert(broswerWidth " " broswerHeight);
If (typeof pageWidth != "number") {
If (document.compatMode == "CSS1Compat") { //The standard mode
pageWidth = document.documentElement.clientWidth;
                       pageHeight = document.documentElement.clientHeight;
                } else {
                     pageWidth = document.body.clientWidth;
                    pageHeight = document.body.clientHeight;
            }
                                                                                                    })();

Get the position of the window: IE, chrome, Safari, use screenLeft, screenTop to get the position of the window from the left side of the screen and the top of the screen. Firefox does not support this attribute. Firefox uses screenXP and screenY to achieve the same effect.

Copy code The code is as follows:
(function btnFun() {
        var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft :
              window.screenX;
        var topPos = (typeof window.screenTop == "number") ? window.screenTop :
                            window.screenY;
alert(leftPos " " topPos);
​​​​ //alert(window.screenLeft " " window.screenTop);
})();

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template