最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JS获取屏幕、浏览器、网页高度,宽度信息定位
时间:2013-08-13 编辑:简简单单 来源:一聚教程网
[ad#content]在JS操作DOM的时候,会经常用到浏览器的高度和宽度来调节DOM的位置,这里特别记录一下。
代码如下 | 复制代码 |
这里特别提示两点:
1、document.body.scrollTop与document.body.clientHeight有的时候是无效的,究其原因是因为声明了DOCTYPE:
当声明了DOCTYPE以后,document.body.scrollTop的值永远等于0,解决的办法是把document.body用document.documentElement替换即可。
2、window.screenTop 与window.screenLeft在Firefox中是没有定义的,它仅能在IE里发挥作用,指的是网页正文部分上与显示器屏幕上的边的距离,刚测试这个的时候我也不是很清楚,其实这个高度也是很有用的,当你需要使用open函数打开一个窗口的时候,就可以利用这个距离来给新打开的窗口定位。
例
代码如下 | 复制代码 |
function calc_scroll_xy() |
JQuery:
代码如下 | 复制代码 |
$(document).ready(function(){ alert($(window).width()); //浏览器当前窗口可视区域宽度 }) |
1、已经能支持获取多浏览器的内部的视口的宽度和高度信息
2、在IE 9中已经和其他的浏览器(Opera、Chrome、FirFox、Safari)一样,已经能支持用window.innerHeight、window.innerWidth、window.outerHeight、window.outerWidth这四个属性获取浏览器的窗口、视口的宽度高度信息,但是IE9以前的IE版本是没有这些属性的,因此在这样的情况下,我将视口和窗口的概念等同起来了。
2、虽然window有宽度和高度信息,但是不一定是真正浏览器窗口的真正的宽度和高度信息。因为有些浏览器返回的结果中就不含菜单栏、工具栏等的高度信息。
实例演示:
在一个垂直内容过多的页面中,使一个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"; } |
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31