`
jackeysion
  • 浏览: 129308 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论
阅读更多
网页可见区域宽: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文档所在窗口的当前宽度。

实现代码

< !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 ( )函数,完成整个操作。


转自 : http://hi.baidu.com/luchaoshuai/blog/item/ebc5d8583fdc09d89d82040c.html
分享到:
评论

相关推荐

    js 获取浏览器窗口大小

    js获取浏览器窗口事件,获取改变后的大小 下载后评论可返回1分

    javascript 浏览器窗口大小改变事件

    这个场景涉及到JavaScript中的窗口大小改变事件。 在JavaScript中,有以下两个主要的事件用于监听浏览器窗口大小的变化: 1. `resize` 事件:这是最直接与窗口大小变化相关的事件。当你拖动浏览器窗口的边缘或者...

    JS根据浏览器窗口大小实时动态改变网页文字大小的方法

    本文主要介绍如何使用JavaScript实现根据浏览器窗口大小动态调整网页文字大小的功能。该技术在实现网页响应式设计中具有重要意义,允许网页内容在不同尺寸的屏幕设备上都能保持良好的可读性和布局适应性。 首先,...

    js实现浏览器窗口大小被改变时触发事件的方法

    在web开发中,调整浏览器窗口大小是常见的用户操作之一,JavaScript提供了一种机制,允许我们在窗口大小变化时执行特定的代码。这篇文章的重点是介绍如何使用JavaScript中的window对象的onresize事件来实现当浏览器...

    Electron无边框窗口(最小化、最大化、关闭、拖动)以及动态改变窗口大小

    无边框窗口允许我们自定义窗口的行为,如添加最小化、最大化、关闭按钮,以及允许用户自由拖动和改变窗口大小。本教程将深入探讨如何在Electron应用中实现这些功能。 首先,我们需要理解Electron的基本结构。...

    窗体大小控制 JS 弹出

    在探讨“窗体大小控制 JS 弹出”的知识点时,我们深入分析JavaScript中窗口弹出功能的精细控制机制。此技术常用于创建自定义尺寸、位置及特性的弹出窗口,广泛应用于网页开发中,以增强用户体验和界面交互性。 ### ...

    JavaScript简单修改窗口大小的方法

    在讨论JavaScript简单修改窗口大小的方法时,我们首先要了解的是Web浏览器窗口控制的相关技术。JavaScript提供了多种方式来对浏览器窗口进行操作,而其中最为常用的就是window对象的moveTo和resizeTo方法。本文将...

    js窗口拖拽(改变大小,最小化,最大化,还原,关闭).zip

    计算并更新窗口大小的逻辑,以实现缩放功能;以及实现窗口状态切换(最小化、最大化、还原和关闭)的逻辑。 知识点详解: 1. **JavaScript事件处理**:项目中的JavaScript代码会监听用户与窗口的交互,例如通过`...

    js获取浏览器窗口宽度、高度 判断浏览器窗口大小改变

    js获取浏览器窗口宽度、高度 判断浏览器窗口大小改变

    Tap控件包含子窗体随主窗体大小而改变

    6. **事件监听和处理**:为了实现Tap控件和子窗体随主窗体大小变化而改变,开发者需要监听窗口大小改变的事件,并在事件触发时执行相应的代码来更新子窗体的大小和位置。这通常涉及编程语言中的事件处理机制,如...

    FitText.js文字字体大小自适应浏览器窗口大小

    FitText.js是一款JavaScript库,专为网页设计师设计,旨在实现文字字体大小的动态自适应,以根据浏览器窗口的尺寸变化自动调整。这个功能在响应式网页设计中尤其有用,因为它可以确保无论用户如何缩放浏览器窗口,...

    自动改变窗口大小_自动改变窗口大小_

    例如,Python的Tkinter库提供`geometry`方法改变窗口大小,JavaScript的Electron框架允许通过`webContents.setSize`方法调整浏览器窗口尺寸。了解特定语言和库的API是实现自动改变窗口大小的关键。 5. **代码示例**...

    动态设置窗口位置和大小

    // 设置窗口大小 window.moveTo((screen.width - 640) / 2, (screen.height - 480) / 2); // 设置窗口位置 ``` 在Qt框架下,我们可以使用`move`和`resize`函数: ```c++ #include #include int main(int argc,...

    JS拖拽改变浮动层窗口大小源码

    JS拖拽并可以改变大小,窗口拖拽(改变大小/最小化/最大化/还原/关闭),一个设计漂亮唯美的JavaScript小窗口,可以像Windows的窗口那样拖大或拖小,它的特点:  ① 窗口可以拖动;  ② 窗口可以通过八个方向...

    网页HTML自适应窗口大小

    例如,`jQuery.doresize`可能就是一个实现了窗口大小变化响应的JQuery插件,它可以自动调整页面元素的大小或布局,确保内容始终适应新的窗口尺寸。 接着,`demo.html`文件很可能是展示如何使用这些自适应技术的一个...

    JS获取浏览器窗口大小

    ### JS 获取浏览器窗口大小 在前端开发中,经常需要获取浏览器窗口的大小,以便于根据不同的屏幕尺寸调整页面布局或实现响应式设计。本文将详细介绍如何使用JavaScript来获取浏览器窗口的宽度、高度以及相关的属性...

    javascript 实现的web页面拖拽程序 窗体大小可调

    这是我自己制作的web页面窗体拖拽程序,从一个按钮(可以使图片,button等等,自己定)拖拽出一个DIV(也可根据自己需要修改),拖拽次数没有限制,该DIV拖拽出来后可以继续调整位置和大小,可用于库房可视化布局...

    Javascript根据图片自动设置窗口大小

    Javascript根据图片自动设置窗口大小

    js实时获取窗口大小变化的实例代码

    本文将详细解释如何使用JavaScript实现实时获取窗口大小变化的功能,并通过实例代码演示这一过程。 首先,要了解的是,浏览器提供的window对象具有一个resize事件,当窗口尺寸变化时,会触发这个事件。我们可以通过...

    asp.net 控件随着窗口大小按比例变化源码

    在压缩包内的"Example012-控件随着窗口大小按比例变化"文件中,很可能包含了一个具体的示例项目,展示了如何使用VB.NET和HTML/CSS/JavaScript来实现控件的自适应布局。这个示例可能包括了一个ASP.NET Web Forms页面...

Global site tag (gtag.js) - Google Analytics