`
liuguofeng
  • 浏览: 450585 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

JavaScript窗体大小

 
阅读更多

网页可见区域宽：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文档所在窗口的当前宽度。


Code：

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

  • 大小: 11.4 KB
分享到：
| tomcat jndi + spring配置
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

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

    javascript弹出窗体

    - **resizable**：是否允许改变窗口大小（yes/no）。 - **location**：是否显示地址栏（yes/no）。 - **status**：是否显示状态栏（yes/no）。 例如： ```javascript window.open("page.html", "newwindow", ...

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

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

    JavaScript 的模态窗口

    JavaScript的模态窗口是网页开发中常用的一种交互设计，它可以在用户进行其他操作时暂停页面流程，强制用户关注特定信息或执行某个操作。模态窗口通常由一个覆盖在主页面上的半透明背景（通常称为“mask”）和一个...

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

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

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

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

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

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

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

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

    javascript经典特效---打开定制大小窗口.rar

    在"打开定制大小窗口.htm"文件中，可能包含了具体的HTML和JavaScript代码，展示了如何利用这些属性来实现用户自定义窗口大小的功能。可能的实现方式包括监听窗口的`resize`事件，实时更新窗口尺寸，或者通过用户交互...

    JavaScript 获取浏览器的显示区域大小信息

    ### JavaScript 获取浏览器的显示区域大小信息 在网页开发过程中，获取浏览器显示区域的大小是非常重要的一个环节，这对于响应式设计、动态布局调整等场景尤为重要。本文将详细介绍如何使用JavaScript来获取浏览器...

    javascript窗体模式

    JavaScript窗体模式是一种在网页应用中创建和管理窗口的方式，特别是在多页面交互或者单页应用程序（SPA）中，用于提供更好的用户体验和数据传递。在这个模式下，JavaScript被用来控制窗体的显示、隐藏、以及在不同...

    JavaScript窗体特效

    JavaScript可以检测窗口大小变化，实现响应式窗体特效，确保在手机、平板和桌面设备上都有良好的显示效果。 通过分析和实践这些JavaScript窗体特效代码，你可以深入理解JavaScript在网页动态效果中的应用，提升你的...

    JAVASCRIPT弹出窗口大总结

    ### JavaScript弹出窗口知识点总结 #### 一、概述 JavaScript是一种广泛使用的脚本语言，它在前端开发中占据着极其重要的地位。通过JavaScript，开发者可以实现网页与用户的交互功能，其中弹出窗口就是一种常见的...

    JavaScript 带透明度的漂亮窗口

    考虑到现代网页的响应式设计，窗口大小可能需要根据屏幕尺寸调整。可以使用媒体查询(`media queries`)或Bootstrap框架的栅格系统来实现。 综上所述，通过JavaScript和jQuery，我们可以轻松实现带透明度的漂亮窗口...

    动态设置窗口位置和大小

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

    JAVASCRIPT弹出窗口代码

    - 控制用户是否能够调整窗口大小，默认为`yes`。如果设为`no`，则不允许调整大小。 7. **location**： - 控制是否显示地址栏，默认为`yes`。如果设为`no`，则不显示地址栏。 8. **status**： - 控制是否显示...

    javascript经典特效---打开无边窗口.rar

    在"打开无边窗口.htm"这个示例中，开发者可能通过JavaScript代码动态计算窗口大小，或者根据用户交互来调整窗口的位置，从而实现"无边"的效果。这种效果在一些需要全屏展示内容或提供特殊浏览体验的应用中非常常见。...

    JavaScript改变地图DIV大小

    6. **事件监听**：如果你希望地图大小随着浏览器窗口的变化而自动调整，可以监听`resize`事件。 ```javascript window.addEventListener('resize', function() { map.updateSize(); }); ``` 通过以上步骤，你...

    javaScript窗体悬浮

    在网页设计中，"javaScript窗体悬浮"通常指的是利用JavaScript技术实现的浮动广告或者固定位置的元素，这样的元素会始终保持在用户浏览页面时的可视区域内。 在创建一个简单的页面悬浮广告时，主要涉及以下几个...

    玩透javascript弹出窗口

    总结起来，JavaScript弹出窗口通过`window.open`函数实现，可以根据需求自定义窗口的属性，如大小、位置和显示元素，并通过函数和事件绑定来控制何时打开窗口。掌握这些知识，你可以更加灵活地在网页中实现各种弹出...

Magicbox
Global site tag (gtag.js) - Google Analytics