之所以当用户在一个比丰富情之网页遭到点击某一个按钮显示DIV层会发现无其余成效(其实已以页面的顶部显示了)document.body.offsetHeight + ” (包括边线的宽)”

在做项目时相遇了如果在页面上展示一个变迁DIV层的法力。本来做的凡当页面居中时显示的,但后来由此好的测试发现,当网页中起了滚动条后,那个浮动的DIV却还是当页面的顶部显示的。因此当用户在一个比丰富情的网页遭到点击某一个按钮显示DIV层会发现无外力量(其实就当页面的顶部显示了),因此,我们需要准备的明亮用户眼前之浏览的职务的消息。在落实这个要求前,先来瞧当js中产生什么工具得以让咱应用:

故而当用户在一个比较丰富情之网页中点击某一个按钮显示DIV层会发现并未任何功效(其实都以页面的顶部显示了),因此,我们要预备的理解用户眼前底浏览的职的消息。在促成之要求前,先来探在js中生怎么样工具得以叫咱们用:

网页可见区域方便: document.body.clientWidth;
网页可见区域大: document.body.clientHeight;
网页可见区域方便: document.body.offsetWidth + ”
(包括边线和滚动条的方便)”;
网页可见区域赛:document.body.offsetHeight + ” (包括边线的有余)”;
网页正文全文宽:document.body.scrollWidth;
网页正文全文高:document.body.scrollHeight;
网页为卷去的大(ff): document.body.scrollTop;
网页为卷去的胜(ie):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 +” 像素/英寸”;

网页可见区域方便: document.body.clientWidth;
网页可见区域大: document.body.clientHeight;
网页可见区域方便: document.body.offsetWidth + ”
(包括边线和滚动条的富贵)”;
网页可见区域大:document.body.offsetHeight + ” (包括边线的丰足)”;
网页正文全文宽:document.body.scrollWidth;
网页正文全文高:document.body.scrollHeight;
网页为卷去的胜(ff): document.body.scrollTop;
网页为卷去的强(ie):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 +” 像素/英寸”;

 

 

这段资料来源网络,看到这般多的相似的定义时自我曾疯掉了,但处于技术人的履着,我还是顽强的羁押罢了连举行了有的掌握。经过协调之掌握与收后,我道要我老是想抱一个莫大要增幅信息经常我会抓狂的,因此,我本着浏览器的这些性做了部分理及虚幻,按照这样的老三个目标来剥离这么多的形似之性,第一只是页面,第二凡是窗口,第三独凡是视口。来拘禁图片理解我的立三单对象的意义吧:

当即段资料来源网络,看到这般多的相似的定义时自我一度疯掉了,但处于技术人的实行着,我或顽强的羁押罢了连举行了一部分知道。经过协调之明白与接受后,我觉着只要我老是想抱一个莫大要增幅信息经常我会抓狂的,因此,我本着浏览器的这些性做了有理及虚幻,按照这样的老三个对象来剥离这么多之形似之性,第一只凡是页面,第二凡是窗口,第三个是视口。来拘禁图理解自己的立三只目标的意思吧:

365体育官网 1

365体育官网 2

本着这三个概念做一个诠释:

对当下三独概念做一个解说:

页面:就是咱做出来的网页的页面的一个架空,他的莫大一般比较咱的浏览器的惊人要高,宽度通常是小于等于我们的浏览器宽度

页面:就是咱制作出的网页的页面的一个泛,他的可观一般比较我们的浏览器的冲天要后来居上,宽度通常是仅次于等于我们的浏览器宽度

浏览器窗口:就是咱运用的浏览器的一个泛,他饱含了菜单栏、工具栏、书签栏、状态栏、页面显示区等。因此他的莫大绝对高于等于视口的可观,宽度绝对超乎等于视口的增长率

浏览器窗口:就是咱们用的浏览器的一个虚幻,他带有了菜单栏、工具栏、书签栏、状态栏、页面显示区等。因此他的高度绝对超越等于视口的高度,宽度绝对不止等于视口的涨幅

视口:就是浏览器中展示页面的区域

视口:就是浏览器中形页面的区域

出矣即三单概念铺底,我们来描写个小类库,获取之“对象”的冲天与宽度等信息吧:

有了立三个概念铺底,我们来写单小类库,获取之“对象”的高度和幅度等消息吧:

 

复制代码 代码如下:

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 != "number") {
                _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: function () {
            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: function () {
            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: function () {
            var _width;
            if (document.compatMode == "CSS1Compat") {
                _width = document.documentElement.offsetWidth;
            } else {
                _width = document.body.offsetWidth;
            }
            return _width;
        },
        width: function () {
            return Browser.ViewPort.innerWidth();
        },
        height: function () {
            return Browser.ViewPort.innerHeight();
        }
    }

})();

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 != “number”) {
_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: function () {
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: function () {
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: function () {
var _width;
if (document.compatMode == “CSS1Compat”) {
_width = document.documentElement.offsetWidth;
} else {
_width = document.body.offsetWidth;
}
return _width;
},
width: function () {
return Browser.ViewPort.innerWidth();
},
height: function () {
return Browser.ViewPort.innerHeight();
}
}
})();

 

举行几触及说明:
1、已经能够支持获取多浏览器的中间的视口的涨幅与冲天信息
2、在IE
9中已经跟任何的浏览器(Opera、Chrome、FirFox、Safari)一样,已经会支撑用window.innerHeight、window.innerWidth、window.outerHeight、window.outerWidth这四独特性获取浏览器的窗口、视口的宽高度信息,但是IE9以前的IE版本是从未有过这些性的,因此在这样的情景下,我拿视口和窗口的定义相当以及起来了。
2、虽然window有宽和可观信息,但是未肯定是真正浏览器窗口的真的的幅度和高度信息。因为微微浏览器返回的结果负就是无含菜单栏、工具栏等的高度信息。
实例演示:
以一个直内容了多之页面被,使一个DIV总能保持在视口的主干岗位(非精确中心位置):
代码:

举行几接触说明:

复制代码 代码如下:

1、已经能够支撑获取多浏览器的内部的视口的宽与惊人信息

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 = top + “px”;
document.getElementById(“divCenter”).style.left = left + “px”;
}

2、在IE
9中早就与其余的浏览器(Opera、Chrome、FirFox、Safari)一样,已经会支撑用window.innerHeight、window.innerWidth、window.outerHeight、window.outerWidth这四只属性获取浏览器的窗口、视口的肥瘦高度信息,但是IE9以前的IE版本是绝非这些性的,因此在这么的情景下,我以视口和窗口的定义相当及起来了。

世家测试时可采取改变窗口大小的法门来查阅。
时间不早了,晚安!
源代码下载查看

2、虽然window有宽度和高度信息,但是未肯定是实在浏览器窗口的审的涨幅和冲天信息。因为小浏览器返回的结果遭到即使不包含菜单栏、工具栏等之可观信息。

您或许感兴趣之稿子:

  • JavaScript获得网页、浏览器、屏幕高度与增幅汇总
  • javascript获得和判断浏览器窗口、屏幕、网页的可观、宽度等
  • JS获取屏幕,浏览器窗口大小,网页高度小幅(实现代码)
  • javascript获得设置div的莫大与宽度兼容任何浏览器
  • js/jquery获取浏览器窗口可见到区域高度与宽和滚动条高度实现代码
  • js
    获取浏览器高度和宽度值(多浏览器)
  • js获取浏览器与屏幕的各种宽度高度

 

实例演示:

每当一个笔直内容过多之页面中,使一个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 = top +
“px”;
            document.getElementById(“divCenter”).style.left = left +
“px”;

        }

 

世家测试时得以改变窗口大小的道来查阅。

 

日子不早了,晚安!

 

源代码下载查看

相关文章