【整理】原生js和jQ获取窗口宽高及滚动条的方法和函数
2017-11-14 13:22
495 查看
原生js和jQ获取窗口宽高及滚动条的方法和函数 一。原生js获取 1.实际宽高(不包括工具栏,滚动条的视口高度,ie6.7.8不支持) window.innerHeight window.innerWidth 2.显示屏宽高 screen.height screen.width 3..显示屏宽高(除windows任务栏之外的高度)屏幕可用工作区 screen.avaiHeight screen.availWidth 4.网页可见区域宽高 document.body.clientWidth document.body.clientHeight 5.网页可见区域宽高(包括边线的宽高) document.body.offsetWidth document.body.offsetHeight 6.网页正文全文宽高 document.body.scrollWidth ocument.body.scrollHeight 7.网页被卷去的左高 document.body.scrollTop document.body.scrollLeft 8.在我本地测试当中:【转】 在IE、FireFox、Opera下都可以使用 document.body.clientWidth document.body.clientHeight 即可获得,很简单,很方便。 而在公司项目当中: Opera仍然使用 document.body.clientWidth document.body.clientHeight 可是IE和FireFox则使用 document.documentElement.clientWidth document.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 ==> 0 document.documentElement.clientHeight ==> 0 FireFox为: 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().left 5.获取滚动条 scrollLeft() scrollTop()
相关文章推荐
- 原生js获取浏览器窗口及元素宽高常用方法集合
- 原生js--兼容获取窗口滚动条位置和窗口大小的方法
- js获取父窗口的变量和函数方法
- 原生js获取宽高与jquery获取宽高的方法关系对比
- 原生JS 获取浏览器、窗口、元素等尺寸的方法及注意事项
- 如何获取视窗宽高 js方法 && jq方法
- 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名
- 原生js获取宽高与jquery获取宽高的方法的关系
- 原生js获取宽高与jquery获取宽高的方法关系对比
- iframe里面的页面调用父窗口,左右窗口js函数的方法
- iframe里面的页面调用父窗口,左右窗口js函数的方法
- 页面加载完成后自动执行一个方法函数的JQ、JS方法
- js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
- js 获取屏幕各种宽高的方法(浏览器兼容)
- javascript中iframe里面的页面调用父窗口js函数的方法。
- js 获取屏幕各种宽高的方法(浏览器兼容)
- js 获取屏幕各种宽高的方法(浏览器兼容)
- 封装getByClass(JS获取class的方法封装为一个函数)
- JS获取网页宽高方法集合
- javascript中iframe里面的页面调用父窗口js函数的方法。