js获取浏览器基本信息大全


Posted in Javascript onNovember 27, 2014

网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE,FireFox 差异如下

IE6.0、FF1.06+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

-------------------

技术要点

本节代码主要使用了Document对象关于窗口的一些属性,这些属性的主要功能和用法如下。

要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在 IE下需要深入Document内部对body进行检测;在DOM环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

关于获取各种浏览器可见窗口大小的一点点研究。

在我本地测试当中:在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 相关文章推荐
JQuery 学习笔记 选择器之三
Jul 23 Javascript
HTML node相关的一些资料整理
Jan 01 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
js浏览器html5表单验证
Oct 17 Javascript
js实现按座位号抽奖
Apr 05 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 Javascript
jQuery实现多按钮单击变色
Nov 27 #Javascript
jQuery的ready方法详解
Nov 27 #Javascript
javascript 面向对象封装与继承
Nov 27 #Javascript
javascript制作坦克大战全纪录(2)
Nov 27 #Javascript
javascript制作坦克大战全纪录(1)
Nov 27 #Javascript
使用jsonp完美解决跨域问题
Nov 27 #Javascript
JavaScript变量声明详解
Nov 27 #Javascript
You might like
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
Python备份Mysql脚本
2008/08/11 Python
教你安装python Django(图文)
2013/11/04 Python
Python基于select实现的socket服务器
2016/04/13 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
PyTorch实现AlexNet示例
2020/01/14 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
工作鉴定评语
2014/05/04 职场文书
某某同志考察材料
2014/05/28 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
期中考试复习计划
2015/01/19 职场文书
幽默导游词开场白
2015/05/29 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
sql注入报错之注入原理实例解析
2022/06/10 MySQL