获取浏览器高度和宽度
javascript方法
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 ==> 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.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 相对文档的水平座标+垂直方向滚动的量
Jquery方法
1. $("#div_id").height(); // 获得的是该div本身的高度, (不包含padding,margin,border)2. $("#div_id").outerHeight(); // 包含该div本身的高度, padding上下的高度, 以及border上下的高度(不包含margin的高度)3. $("#div_id").outerHeight(true); // 包含该div本身的高度, 以及padding,border,margin上下的总高度
实现代码
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>请调整浏览器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312"></meta></head><body><h2 align="center">请调整浏览器窗口大小</h2><hr /><form action="#" method="get" name="form1" id="form1"><!--显示浏览器窗口的实际尺寸-->浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"/><br />浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"/><br /></form><script type="text/javascript"><!--var winWidth = 0;var winHeight = 0;function findDimensions() //函数:获取尺寸{//获取窗口宽度if (window.innerWidth)winWidth = window.innerWidth;else if ((document.body) && (document.body.clientWidth))winWidth = document.body.clientWidth;//获取窗口高度if (window.innerHeight)winHeight = window.innerHeight;else if ((document.body) && (document.body.clientHeight))winHeight = document.body.clientHeight;//通过深入Document内部对body进行检测,获取窗口大小if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth){winHeight = document.documentElement.clientHeight;winWidth = document.documentElement.clientWidth;}//结果输出至两个文本框document.form1.availHeight.value= winHeight;document.form1.availWidth.value= winWidth;}findDimensions();//调用函数,获取数值window.onresize=findDimensions;//--></script></body></html>
获取浏览器高度和宽度相关推荐
- 编辑器js获取浏览器高度和宽度值(转)
js获取浏览器高度和宽度值 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: docume ...
- java中如何设置浏览器宽度_[Java教程]关于JS中获取浏览器高度和宽度值的多种方法(多浏览器)_星空网...
关于JS中获取浏览器高度和宽度值的多种方法(多浏览器) 2017-08-07 0 三种浏览器获取值方法 IE中: document.body.clientWidth ==> BODY对象宽度 d ...
- js 获取浏览器高度和宽度值
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
- 不同浏览器JS获取浏览器高度和宽度
摘自:http://blog.csdn.net/lai_gb/archive/2009/07/04/4320956.aspx IE中: document.body.clientWidth ==> ...
- Js操作DOM及获取浏览器高度以及宽度
在JavaScript中,经常会需要获取document文档元素,是HTML文档对象模型的缩写,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. ...
- js 获取浏览器高度和宽度值(多浏览器)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 documen ...
- js 获取浏览器高度和宽度值(兼容多浏览器)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 documen ...
- JS兼容所有浏览器获取浏览器高度和宽度
var w = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth; var h = ...
- js获取浏览器窗口页面宽度、高度的方法 kaki 的博客
js获取浏览器窗口页面宽度.高度的方法 不多说,直接上代码 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()) ...
- JavaScript——获取浏览器滚动条(ScrollBar)宽度
问题描述 不同浏览器的滚动条宽度不相同,需要动态获取浏览器滚动条宽度. 问题分析 screen.width屏幕分辨率宽度 document.body.scrollWidth 页面完整宽度 docume ...
最新文章
- Hangry 饥饿成怒 2016-10-03
- 移动端省际联动插件mobiscroll
- 聚合登录平台网站源码
- Python Day10 MySQL 01
- 为什么用自己的电脑部署服务器之后外网访问不到呢?并且该如何解决这个问题呢?
- jq禁用html标签
- GMapping原理分析
- SQLPlus登录及使用
- linux 安装vim 8.2(支持python3)
- 广联达报错access_广联达软件报错问题汇总和解决方案.doc
- Mac访问微软远程桌面Microsoft Remote Desktop For Mac
- 0-100数字播报语音包
- HTML+CSS抗疫网页设计 疫情感动人物静态HTML网页 web前端开发技术 web课程设计 网页规划与设计
- 好用的revit软件:MEP绘制管道风管时,提示不可见如何解决?
- 10-3 设置坐标轴样式
- 这届铲屎官不错,既舍得花钱,又会科学养猫养狗
- 字符串以特定方式转换为列表
- c语言编程题水仙花,4.2.4 编程题《水仙花数》
- linux各种IPC机制
- java javamail,基于java使用JavaMail发送邮件