关于获取各种浏览器可见窗口大小的一点点研究。在我本地测试当中:在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的标准在作怪啊 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高)真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。  用Javascript获取指定页面元素的位置是一个非常常见的需求,本文介绍的函数能够准确返回一个元素相对于整个文档左上角的坐标,即元素的 top 、left 的位置,而且能够兼容浏览器,相信对新手非常有用。 function getElementPos(elementId) { var ua = navigator.userAgent.toLowerCase(); var isOpera = (ua.indexOf('opera') != -1); var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof var el = document.getElementById(elementId); if(el.parentNode === null || el.style.display == 'none') { return false; } var parent = null; var pos = []; var box; if(el.getBoundingClientRect) //IE { box = el.getBoundingClientRect(); var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop); var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft); return {x:box.left + scrollLeft, y:box.top + scrollTop}; }else if(document.getBoxObjectFor) // gecko { box = document.getBoxObjectFor(el); var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0; var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0; pos = [box.x - borderLeft, box.y - borderTop]; } else // safari & opera { pos = [el.offsetLeft, el.offsetTop]; parent = el.offsetParent; if (parent != el) { while (parent) { pos[0] += parent.offsetLeft; pos[1] += parent.offsetTop; parent = parent.offsetParent; } } if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )) { pos[0] -= document.body.offsetLeft; pos[1] -= document.body.offsetTop; } } if (el.parentNode) { parent = el.parentNode; } else { parent = null; } while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { // account for any scrolled ancestors pos[0] -= parent.scrollLeft; pos[1] -= parent.scrollTop; if (parent.parentNode) { parent = parent.parentNode; } else { parent = null; } } return {x:pos[0], y:pos[1]}; } 使用示例 var pos=getElementPos("divId"); alert("距左边距离"+ pos.x +",距上边距离"+pos.y); h=window.screen.height; y=window.screenTop; ie=h-y; alert(h + '-' + y + '=' + ie); 关于获取各种浏览器可见窗口大小的一点点研究。在我本地测试当中:在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的标准在作怪啊 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高)真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。

转载于:https://www.cnblogs.com/wudingfeng/archive/2011/01/08/1930642.html

js获取窗口宽度高度相关推荐

  1. DOCTYPE声明对JS获取窗口宽度和高度的影响【转】

    [摘注]:以下说法不准确,不是有没有DOCTYPE声明,而是不同的DOCTYPE声明对js的处理有影响. 在没有DOCTYPE声明的情况下: document.body.clientWidth doc ...

  2. js获取浏览器宽度高度(整理)

    在获取浏览器宽度的时候,许多时候需要考虑滚动条的存在. 一般情况作为前端获取浏览器宽度,主要是指获取body的宽度,可操作的可视范围宽度. 一.使用JQuery获取浏览器宽度 重点,jquery获取的 ...

  3. js获取精确宽度/高度(带小数位像素)

    问题:用jquery获取div等块级元素的宽高时不能精确获取,只能得到整数部分像素,不能获取小数位px.请看下面事故: <!DOCTYPE html> <html lang=&quo ...

  4. js获取精确宽度/高度(带小数位的像素)

    解决方法:window.getComputedStyle().getBoundingClientRect() 问题:1.用jquery获取div等块级元素的宽高时不能精确获取,只能得到整数部分像素,不 ...

  5. php判断桌面宽度,js获取页面宽度高度及屏幕分辨率

    网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...

  6. js获取浏览器宽度和高度值

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>请调整浏览器窗口</t ...

  7. js获取div元素高度和宽度的方法

    前端web页面中,js可以很方便的获取div元素的高度和宽度,那么这篇文章就说一说原生JS与JQ如何快速的获取DIV元素的高度和宽度的方法. js获取div元素高度与宽度的方法 js获取div元素的高 ...

  8. 原生js获取html元素高度,原生JS获取元素宽高实践详解

    开篇的话 任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才 ...

  9. JS获取DIV动态高度,并赋值到其style样式中

    <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...

  10. 获取手机宽度高度dpr的方法

    获取手机宽度高度dpr的方法 引言 在做uni-app小程序.app或者h5的时候,默认的手机尺寸基本上是iphone,和安卓机不太一样. 所以我们需要获取自己手机的宽度高度,方法如下 打开HBuil ...

最新文章

  1. 一种实时轻量级3D人脸对齐方法
  2. 什么叫大地高_等电位箱有什么用?
  3. NUnitForms 测试GUI应用程序的优秀工具
  4. 【连载】【FPGA黑金开发板】NIOS II那些事儿--编程风格(三)
  5. 图解VC++开发ActiveX控件C#调用
  6. ubuntu+VsCode+Cmake+eigen 开发eigen应用
  7. JAVA多线程学习(一)
  8. VTK:背景颜色BackgroundColor用法实战
  9. 如何在AS/400上发送带有颜色的MESSAGE
  10. Leetcode之打印链接的倒数第K个节点
  11. Java 18 正式发布,默认 UTF-8,finalize 被弃用,别再乱用了!
  12. SpringCloud+Docker+Jenkins+GitLab+Maven实现自动化构建与部署实战
  13. android系统如何自适应屏幕大小
  14. HDU 4081 Qin Shi Huang's National Road System
  15. 生活中的英语 —— 动植物篇
  16. 实验板FPGA型号在哪里看_项目分享| 自制FPGA最小系统板(PCB可直接打板)
  17. FileZilla传输文件乱码的解决方案
  18. NR LDPC 03- Tanner
  19. 微信小程序----事件绑定
  20. 高等数学(第七版)同济大学 习题6-2 (前12题)个人解答

热门文章

  1. cisco keepalive
  2. WSUS全攻略之二 :安装WSUS
  3. Form的显式方式。
  4. 类似taobao的多彩选项卡tab
  5. C# 后台服务器端 Get 请求函数封装
  6. BZOJ5093 图的价值(NTT+斯特林数)
  7. http请求,普通的get和post方法
  8. Win7升Windows10有获取通知,但是就不推送的解决方法
  9. php学习分享心得吧
  10. leetcode 杨辉三角 III