原生js和jQ获取窗口宽高及滚动条的方法和函数
标签：
JavaScript
原生js和jQ获取窗口宽高及滚动条的方法和函数一。原生js获取1.实际宽高（不包括工具栏，滚动条的视口高度，ie6.7.8不支持）window.innerHeightwindow.innerWidth2.显示屏宽高screen.heightscreen.width3..显示屏宽高（除windows任务栏之外的高度）屏幕可用工作区screen.avaiHeightscreen.availWidth4.网页可见区域宽高document.body.clientWidthdocument.body.clientHeight5.网页可见区域宽高（包括边线的宽高）document.body.offsetWidthdocument.body.offsetHeight6.网页正文全文宽高document.body.scrollWidthocument.body.scrollHeight7.网页被卷去的左高document.body.scrollTopdocument.body.scrollLeft8.在我本地测试当中：【转】在IE、FireFox、Opera下都可以使用document.body.clientWidthdocument.body.clientHeight即可获得，很简单，很方便。而在公司项目当中：Opera仍然使用document.body.clientWidthdocument.body.clientHeight可是IE和FireFox则使用document.documentElement.clientWidthdocument.documentElement.clientHeight原来是W3C的标准在作怪啊<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">如果在页面中添加这行标记的话在IE中：document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度在FireFox中：document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度?在Opera中：document.body.clientWidth ==> 可见区域宽度document.body.clientHeight ==> 可见区域高度document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）而如果没有定义W3C的标准，则IE为：document.documentElement.clientWidth ==> 0document.documentElement.clientHeight ==> 0FireFox为：document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）Opera为：document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074*768 的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句”hello world” , 也仍然取到720.可是在XHTML中, 如果body 体中只有一行, 则document.body.clientHeight 只能取到那一行的高度, 约20px, 这时如何还想取到整个页面的高度, 就要用document.documentElement.clientHeight 来获取了.原因是: 在HTML 中, body 是整个DOM 的根, 而在XHTML 中, document 才是根, body 不再是根, 所以取body 的属性时, 不能再取到整个页面的值.区别新旧标准的行是:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” ><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>前者指明该页面使用旧标准, 后者指明该页面使用新标准.总结:XHTML中用 document.documentElement.clientHeight 代替9.获取滚动距离的函数，可直接调用___getPageScroll()函数来获取数组，或自己调试成相应的对象。function ___getPageScroll() { var xScroll, yScroll; if (self.pageYOffset) { yScroll = self.pageYOffset; xScroll = self.pageXOffset; } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict yScroll = document.documentElement.scrollTop; xScroll = document.documentElement.scrollLeft; } else if (document.body) {// all other Explorers yScroll = document.body.scrollTop; xScroll = document.body.scrollLeft; } arrayPageScroll = new Array(xScroll,yScroll); return arrayPageScroll;};二。jQ获取1.获取第一个div的宽高$("div").width()$("div").height()2.获取padding+content的宽高$("div").innerWidth()$("div").innerHeight()3.获取content+padding+border+margin的宽高$("div").outerHeight()$("div").outerWidth()4.获取当前元素的相对窗口偏移量（position:relative下的子元素）$("p").offset().top$("p").offset().left5.获取滚动条scrollLeft()scrollTop()
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦