`
zolo.highflyer
  • 浏览: 10368 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Js获取浏览器宽高 转载

 
阅读更多

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>

</html>

分享到：
| Jetspeed组织机构管理二次开发
评论
发表评论

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

相关推荐

    JavaScript获取系统时间（转载）

    在探讨如何利用JavaScript获取系统时间之前，我们先来理解一下JavaScript中的Date对象，它是处理日期和时间的关键。Date对象提供了多种方法，可以用来获取当前或指定的日期和时间信息，包括年、月、日、小时、分钟、...

    js提示框-转载+++ js 乱码+++自动提交+滚动图片加载+箭头导航(转载)

    标题中的“js提示框-转载+++ js 乱码+++自动提交+滚动图片加载+箭头导航(转载)”表明这篇内容涵盖了多个JavaScript相关的知识点。这里我们将分别解析这些关键点，并深入探讨它们。 首先，"js提示框"指的是...

    转载40种转载40种网页常用小技巧(javascript)－－备不时之需(javascript)－－备不时之需

    根据提供的标题、描述、标签及部分内容，我们可以整理出一系列与网页设计及JavaScript相关的实用技巧，以下是对这些技巧的详细介绍： ### 1. 屏蔽鼠标右键 ```javascript oncontextmenu="window.event.returnValue=...

    02-javaWeb-css$js.7z

    js获取元素 简单表单校验案例 函数定义——2 js事件和函数的绑定——2 bom（Browser浏览器对象）中window对象的定时器方法 定时器 String对象 图片轮播案例 补充 运算符 语句 总结 ——————————...

    javascript排序分页（转载）

    JavaScript，作为浏览器端的主要脚本语言，被广泛用于实现这些动态效果。本篇文章将详细探讨如何使用JavaScript，结合jQuery库，来实现数据的分页显示以及表格内容的排序。 **一、排序** 在JavaScript中，数组的...

    vue 实现Web端的定位功能 获取经纬度

    比如在iOS的Safari浏览器和微信内置浏览器中可能可以正常获取GPS定位，而在Android系统的微信内置浏览器中可能获取失败。对于这种情况，可以进行适配，如在获取位置失败后使用IP定位作为备选。 ### 总结 使用Vue...

    纯js写的一行多图轮播（转载自模板网）

    - 纯JS实现轮播需要掌握基本的DOM操作，包括获取元素、设置属性、添加事件监听器等。JavaScript是实现轮播动态效果的关键，它会监听用户的交互（如点击按钮）并改变图片的显示状态。 4. **变量与计数器**： - ...

    javascript

    - **JavaScript**：一种广泛使用的编程语言，主要用于Web前端开发，也可用于服务器端开发（如Node.js）。 #### 描述解析 - **keyCode代码对应表(函数实现)**：此描述指出本文将介绍一个关于`keyCode`及其在...

    03-javaWeb-js.7z

    JS获取设置元素  JS修改样式  Window加载省略 案例1-定时弹出广告 bom(浏览器对象模型) window对象详解 location:定位信息 history:历史 事件总结 常见的事件 所有事件案列 扩展——this使用 案例2-...

    关注基础知识，打造优质前端博客，公众号前端工匠的作者.zip

    欢迎添加我的个人微信frontJS，获取大厂面试题及其答案版权声明本文为博主原创文章，未经博主允许不得转载。掘金博客（全集）sectionFault博客(精华)想加入加入交流群，跟风暴一线大厂的大佬交流学习，先关注「前端...

    【转载】javaScript常用的东东

    JavaScript是一种广泛应用于Web开发的脚本语言，它在浏览器端运行，为网页添加交互性，使得用户能够与页面进行动态沟通。这篇博文整理了55个JavaScript中的常用方法，涵盖了数组操作、对象处理、字符串处理、函数...

    页面刷新方法汇总（转载）

    - **F5键刷新**：这是最基础的刷新方式，用户只需按下F5键，浏览器会重新向服务器发送请求，获取整个页面的新内容。 - **Ctrl+F5强刷**：与F5不同，Ctrl+F5会忽略浏览器的缓存，强制获取服务器上的最新内容。 - *...

    15天学会JQuery(转载)

    另外，`$.getJSON()`用于获取JSON数据。 6. **插件系统**: jQuery有一个庞大的插件生态系统，如`jQuery UI`提供了丰富的用户界面组件，`bootstrap`配合jQuery实现响应式布局，`select2`改进了下拉选择框的体验等。 ...

    js使用小技巧

    s += " 网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)"; s += " 网页正文全文宽："+ document.body.scrollWidth; s += " 网页正文全文高："+ document.body.scrollHeight; s += " 网页被卷去...

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