网页可见区域宽: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.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 ------------------- 技术要点 本节代码主要使用了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文档所在窗口的当前宽度。 实现代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 < !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> 源程序解读 (1)程序首先建立一个表单,包含两个文本框,用于显示窗口当前的宽度和高度,并且,其数值会随窗口大小的改变而变化。 (2)在随后的JavaScript代码中,首先定义了两个变量winWidth和winHeight,用于保存窗口的高度值和宽度值。 (3)然后,在函数findDimensions ( )中,使用window.innerHeight和window.innerWidth得到窗口的高度和宽度,并将二者保存在前述两个变量中。 (4)再通过深入Document内部对body进行检测,获取窗口大小,并存储在前述两个变量中。 (5)在函数的最后,通过按名称访问表单元素,结果输出至两个文本框。 (6)在JavaScript代码的最后,通过调用findDimensions ( )函数,完成整个操作。
发表评论
-
转载:jquery webservice 跨域
2013-01-28 16:06 1257现在的JQuery中$.ajax方法支持跨域读取json数 ... -
变更地址栏参数
2011-09-14 10:06 788<html> <head ... -
仿google 日历
2011-08-24 23:10 869仿google 日历仿google 日历仿google 日历仿 ... -
Jquery fullcalendar 官方中文文档
2011-08-22 08:47 24851. 使用方式, 引入相关js, css后, $(‘#div_ ... -
js webservice
2011-05-12 08:50 10811. 创建webservice,为了免于落俗我稍稍修改了 ... -
光标位置函数
2010-12-16 12:44 783function getCursortPosi ... -
select元素javascript常用操作
2010-12-14 09:32 627东西很简单,只是自己记性不好,经常忘记一些关键字 所以发 ... -
cookie
2010-09-17 09:06 669function SetCookie(CookieNa ... -
webservice and js
2010-06-24 09:17 810jQuery调用WebService网上的介 ... -
js 类的实现 转载
2010-05-14 10:43 760JavaScript本身并不是设计成面向对象的,所以没 ... -
jsxiaoguo
2009-05-14 10:52 705jsxiaoguo -
闭包小例
2009-02-05 08:53 716//A是一个普通的函数 ... -
js other event target
2008-11-20 14:41 1117解耦导航模式 function Onclick(evt) ... -
用 javascript 处理 JSON
2008-11-19 14:33 1278用 javascript 处理 JSON 关键字: json ... -
js 倒计时
2008-11-13 09:28 948<!doctype html public " ... -
Javascript中最常用的55个经典技巧
2008-09-27 17:47 8531. oncontextmenu="window.e ... -
js xml
2008-09-17 10:53 1198loadXML = function(xmlFile) ... -
正则表达式
2008-09-12 09:04 796数:44] //校验是否全由数字组成 function ... -
js 函数
2008-09-11 13:12 7871.document.write(""); ... -
js 验证函数
2008-09-11 13:03 687Javascript函数大全 /* ---------- ...
相关推荐
VB实现窗口文字大小随窗体大小变化,实现了窗体文字的随窗口大小自适应改变,只要用鼠标拖动窗口的大小,即可改变窗口内所属控件的文字大校自适应大小的窗口框架,注意,把需要随窗体改变大小的空间的tab属性设置成 ...
C# 窗体中的控件及菜单随窗体大小而变化 让C#窗体中的控件、按钮以及菜单等随窗体的大小变化而变化,在Word中,大家会见到,当Word的窗体不是最大化的时候,那些操作按钮会自动隐藏起来,用箭头来代替,点击箭头会...
c#语言 控件大小以及字体随窗口大小以及字体随窗口改变而自动缩放
VB 禁止调整MDI窗体大小,窗体文件一共是2个,一个是主窗口文件,一个是MDI窗口文件,实现禁止改变窗口大小的功能,我们可以在MDIForm中当窗体加载时,,执行以下代码: Private Sub MDIForm_Load() Style = ...
VB窗体控件大小随窗体大小变化而变化的程序
VB窗体控件大小随窗体大小变化自動調整 有时窗体变化后,如改变分辨率后控件大小却不能随之改变。手工代码调整实在麻烦,下面的模块实现自动查找窗体上控件并使其改变大小以适应窗体变化。 在Form的Resize事件中...
C#无标题栏拖动、C#无标题栏窗口调整大小、C#拖动标题栏、C#调整窗口大小、
mfc根据窗口大小自动调整所有控件大小,自己编的,希望对你有用
VS+Qt设置窗口尺寸(一):固定窗口大小,无法最大化,调节尺寸
利用WPF建立自适应窗口大小布局的WinForm窗口[参照].pdf
2、VS2013 MFC 对话框控件大小随窗口大小改变而改变详细教程
vb.net控件随窗口大小调整
客户端无边框拖动,并可拉伸,压缩改变窗体大小。
大家好,欢迎来到本视频中的优势,讨论如何在您要更改前面板窗口大小时使用户界面自动调整大小,所以让我们从一个简单的示例开始 将包括权重 波形图然后我必须放入控件,所以这基本上是为了改善用户体验。开始我的...
以最简单方式实现页面所有控件随窗口大小改变而等比例变化,代码中也包含手动计算左上间距实现等比例代码。
Windows中的许多窗体都能任意改变大小,并且其中的控件会随窗体大小的改变而改变。而默认情况下,如果VB窗体大小改变,其中的控件是不会自动改变的。 那么我们如何让VB控件大小随窗体的改变而改变呢?本资源包含...
winform无边框在panel上拖动窗口位置,改变窗口大小 如果不能使用随时联系我
WPF中的Button等控件随着窗体大小的改变而改变大小,能够自适应窗体的大小。
一个控件自适应窗体大小改变的类,调用只需3行代码。能够使控件随着窗体大小的改变而改变。资源本是网上找的,我做了改进,能够使控件的字体样式,字体大小,控件大小随着窗体大小变化而做出相应的改变,是一个比较...
如编辑框定左顶高变宽,按钮定宽高顶变左.2>如题,论坛和百度里面找了很多改变窗口大小组件自动调整的代码,均没有有效的解决方案.3>来源:本程序借鉴论坛部分源码,经过消化整理而成.4>组成:需要精易模块V5以上,无需Dll,...