原文:http://www.cnblogs.com/dengshunping/archive/2009/06/15/1503803.html

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.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 相对文档的水平座标+垂直方向滚动的量

实现代码

< !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>

浏览器操作html页面的width和height的更多相关文章

  1. sublime text 3插件改造之AutoFileName去掉.vue文件中img标签后面的width和height，完全去掉！！

    在.vue文件中img标签使用autofilename提示引入文件时,会在文件后面插入宽度高度,如下图: 文件后面会自动插入height和width,其实这两玩意儿在大多数时候并没卵用,然后就开始了百 ...

  2. WinForm使用WebBrowser操作HTML页面的Element

    前言 在 Window Form 应用程序如果需要浏览网页时可以崁入 WebBrowser 控件,但如果需要操作崁入的 HTML 的网页元素,就需要额外的操作,以下纪录几种操作 HTML 元素的方法以 ...

  3. jquery的常用操作（操作html页面的Dom对象的元素）

    一:页面加载完成时,会执行jquery的方法(不需要等待图片加载完成,只要dom结构加载完成,就执行该方法) //第一种写法: $(document).ready(function() { // 执行 ...

  4. 浏览器中页面的visibility状态及变化监听

    需求 在浏览器中播放视频,当用户进行页面切换操作时.需要根据视频播放页是否处于可见状态,来控制视频的暂停及重新播放. 相关文档 参考MDN中,关于页面的可见性相关的API说明.https://deve ...

  5. 《浏览器工作原理与实践》<06>渲染流程（下）：HTML、CSS和JavaScript，是如何变成页面的？

    在上篇文章中,我们介绍了渲染流水线中的 DOM 生成.样式计算和布局三个阶段,那今天我们接着讲解渲染流水线后面的阶段. 这里还是先简单回顾下上节前三个阶段的主要内容:在 HTML 页面内容被提交给渲染 ...

  6. 设置了width和height的a元素在IE11与IE11以下浏览器中的不同渲染方式

    #welcomeMiddleBtn { display: block; width: 73px; height: 120px; margin: 0px auto; } <a id="w ...

  7. [react] 什么是虚拟dom？虚拟dom比操作原生dom要快吗？虚拟dom是如何转变成真实dom并渲染到页面的?

    壹 ❀ 引 虚拟DOM(Virtual DOM)在前端领域也算是老生常谈的话题了,若你了解过vue或者react一定避不开这个话题,因此虚拟DOM也算是面试中常问的一个点,那么通过本文,你将了解到如下 ...

  8. 浏览器助手,请求拦截，后台模拟键鼠操作，页内嵌入JS

    http://www.cnblogs.com/ /// <summary>        /// 网页浏览器助手        /// 请求拦截,后台模拟键鼠操作,页内嵌入JS       ...

  9. 高并发分布式系统中生成全局唯一（订单号）Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数

    高并发分布式系统中生成全局唯一(订单号)Id   1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...

随机推荐

  1. 【巧妙算法系列】【Uva 11464】 - Even Parity 偶数矩阵

    偶数矩阵(Even Parity, UVa 11464) 给你一个n×n的01矩阵(每个元素非0即1),你的任务是把尽量少的0变成1,使得每个元素的上.下.左.右的元素(如果存在的话)之和均为偶数.比 ...

  2. SQL Server 强行Insert包含自增列值的记录

    SET IDENTITY_INSERT 表 ON INSERT INTO 表 ([ID] ,[SequenceNumber] ,[EnumCode] ,[Description]) VALUES ( ...

  3. Eclipse开发Android项目安装配置

    在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想在自己Windows上建立Android开发环境投入Android浪潮的朋友们,为了确保大家能顺利完成开发环境的搭建, ...

  4. [ofbiz]entitymode中类型的对照关系

    在实体数据结构的时候,习惯于数据库的设计模式,int,varchar等各种类型,但是在entitymode中不是直接使用数据库的类型模式,而是自己定义了一套数据类型(type). 如何找到两者之间的对 ...

  5. JS判断邮箱格式

    function check(){    var strText=$("#email").val();    var strReg=/^\w+((-\w+)|(\.\w+))*\@ ...

  6. View的工作原理(一)——Measure

    一.认识ViewRoot和DecorView 当Activity对象被创建的时候,会将DecorView添加到Window中,同时创建ViewRootImpl对象(ViewRoot对应于ViewRoo ...

  7. 1041. Be Unique (20)

    Being unique is so important to people on Mars that even their lottery is designed in a unique way. ...

  8. 15 Tricks to Appear Smart in Emails（转）

    英文原文:15 Tricks to Appear Smart in Emails 如果你不关心在邮件中表现聪明,就不要看本文了. 好吧,我们是孤独的. 在公司环境里,与电子通讯的肥沃土壤相比,没有什么 ...

  9. 从sample来学习Java堆(转)

    1)Java堆 所有对象的实例分配都在Java堆上分配内存,堆大小由-Xmx和-Xms来调节,sample如下所示: public class HeapOOM { static class OOMOb ...

  10. Snippet Compiler——代码段编译工具

    原文地址:http://www.cnblogs.com/conexpress/archive/2011/07/24/2115308.html 不知道大家在工作中是否遇到过下面的情况:在项目中实现了一段 ...