`
zyj7261349
  • 浏览: 26618 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
文章分类
社区版块
存档分类
最新评论

[转帖]Js获取当前浏览器的高度

阅读更多
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>


分享到:
评论

相关推荐

    如何在不同的浏览器中打开控制台调试JS(转帖加自己的截图)

    标题中的“如何在不同的浏览器中打开控制台调试JS”是一个关于网页开发中JavaScript调试的关键话题。在现代Web开发中,浏览器的开发者工具是必不可少的工具,尤其是JavaScript控制台,它可以帮助开发者追踪错误、...

    论坛转帖工具.rar

    标题中的“论坛转帖工具.rar”表明这是一个用于在论坛之间转移帖子的软件工具,通常用于帮助用户方便地将一个论坛的帖子内容复制到另一个论坛,可能是为了分享信息、讨论或保存重要的帖子。这类工具可能包括自动抓取...

    [转帖]通过WebView获取访问网页的源代码

    1. 要获取网页源代码,可以使用WebView的`evaluateJavascript()`方法,该方法允许在JavaScript环境中执行代码,并将结果作为字符串返回。可以编写一个JavaScript函数来获取页面的HTML内容: ```javascript function...

    贴吧转帖工具

    【贴吧转帖工具】是一种专为百度贴吧用户设计的便捷工具,主要用于提高用户在贴吧中的互动效率。通过这款工具,用户可以实现一键转帖和一键8经验签到的功能,极大地简化了传统操作流程,节省了用户的时间,提升了...

    vb6(源码)缩略图功能的图片浏览器ACSD

    考虑的是如何将一幅图片极其清晰的按照设定大小显示到“容器”中——“容器”可以是多种多样的,而且要充分利用动态创建和卸载控件技术,以便适应不同目录所含有的不同个数的图片,当然正确、...这是网上找的,转帖。 

    UBB论坛转帖圣手.exe

    UBB论坛转帖圣手.exeUBB论坛转帖圣手.exe

    遍历网页的一段Delphi代码(转帖)

    通过与浏览器对象交互,获取网页中的所有元素,并对特定类型的输入框进行值的修改。接下来,我们将详细解释每一部分代码的功能及其应用场景。 #### 1.2 变量定义 - `hform`: IHTMLFormElement 类型变量,表示 HTML ...

    轻松转帖之突破网页复制限制宣贯.pdf

    对于火狐浏览器,用户可以编写或安装UserScript(如New Anti-Disabler),这段JavaScript代码可以在用户访问任何网站时自动运行,以取消网页的右键和文本选择限制。安装Greasemonkey扩展后,用户只需重启Firefox并...

    一键转帖功能插件 for 帝国CMS 6.0 GBK utf8 V1.0.rar

    `copyto.php`负责处理转帖请求,如获取当前文章的信息,生成适合其他平台的分享链接或代码,然后将这些信息以可复制的格式返回给用户,让用户可以轻松地将内容分享到社交媒体或其他网站。 在使用过程中,可能会遇到...

    编辑人员转帖去水印工具

    本篇文章将详细探讨“编辑人员转帖去水印工具”,并介绍如何使用名为Teorex Inpaint的1.0.0.2版本的软件来实现这一目标。 首先,我们要理解什么是水印。水印通常是指在图像或视频中添加的半透明标记,它可以是文字...

    discuz X2转帖工具、采集工具

    X2转帖工具、采集工具”是针对这个平台设计的辅助软件,主要用于帮助论坛管理员或用户批量发布帖子和采集内容,提高论坛内容更新的效率。 一、批量发帖功能 1. 自动化发布:此工具可以自动化地创建和发布帖子,...

    一键转帖功能插件 for 帝国CMS v1.0.rar

    "copyto.js" 是一个JavaScript文件,它的主要作用是在前端实现一键转帖的功能,可能包含事件监听、内容提取、以及与服务器交互的逻辑。"copyto.php" 是后端处理脚本,它接收来自前端的请求,处理数据,例如验证用户...

    转帖工具插件 for PHPwind 7.5 正式版.rar

    6. **更新与维护**:由于是开源社区的一部分,插件可能有持续的更新和维护,用户应定期检查是否有新的版本发布,以获取最新的功能和修复已知问题。 7. **安全与性能**:在使用任何第三方插件时,都应注意其可能带来...

    [转帖]世界编程大赛第一名写的程序

    团队还需要建立一套有效的工作流程,确保每个人都能及时获取信息并协同工作。 6. **心理素质与时间管理**:在高压环境下保持冷静,合理安排时间,是赢得比赛的重要因素。练习心理调节技巧,如深呼吸、正念冥想,...

    Maxthon2.0.2.2961苦菜花增强优化安装版

    清除烦恼 Maxtor 自动滚屏插件 设置页面背景色插件 Dict在线电子辞典 Alexa和PageRank QQ和MSN即时聊 ViewPage Weather5 ZoomX(部分杀毒软件有误报)闹钟 虎牙查询 &lt;br&gt;超级论坛转帖工具1.1,可以实现...

    Html2UBBMaxcj_Softii论坛专用转帖工具

    - **人人软件站.url**:这可能是一个快捷方式,指向一个网站,用户可以通过这个链接获取更多的软件信息或者下载其他资源。 - **Html2UBB**:这可能是实际的软件执行文件或库文件,用户需要运行或解压后才能使用...

    [转帖]jQuery实现省市联动

    3. **异步数据获取**:在事件处理函数中,使用`$.ajax()`或者`$.getJSON()`发送Ajax请求获取城市数据。URL应根据实际项目结构设置。 ```javascript $.ajax({ url: '/api/cities?provinceId=' + $(this).val(), ...

    转帖工具ConvertX fordiscuz7.1/7.2 修改增强版.rar

    1.修改自Convert X转帖工具 2.新增批量替换关键词(原来是单个词语替换,可以利用这个功能删除一些网站的防转帖代码) 3.批量随机新增文字(新增内容可自定义,从而实现伪原创) 4.cookie记录替换和新增关键词(避免每次...

    转帖图片提取工具 v1.0.zip

    转帖图片提取工具可以对论坛图片附件信息进行清除,只保留图片代码,操作很简单,推荐有需要转帖图片工具的朋友下载 转帖图片提取工具使用方法: 将IP138上处理过的东西复制到上方的编辑框内,点击只要图片,下面...

    【转帖】想跟黑客叫板,就不能不知道这些东西

    攻击者通过修改受害者浏览器中的Cookie值,模拟合法用户的会话状态,进而获取对网站的未授权访问。例如,攻击者可能篡改管理员的登录会话,以管理员的身份执行操作。 ### 上传漏洞 上传漏洞是指网站允许用户上传...

Global site tag (gtag.js) - Google Analytics