Js获取浏览器的高度和宽度等参数

最新推荐文章于 2024-09-20 16:06:21 发布
最新推荐文章于 2024-09-20 16:06:21 发布
阅读量385 收藏
点赞数
分类专栏： JavaScript 文章标签： 浏览器 firefox opera 工作 xhtml 文档

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

######################################################################

网页可见区域宽： 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 相对文档的垂直座标aa

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.οnresize=findDimensions;

//-->

</script>

</body>

</html>

liuzx32
关注
专栏目录
JS 获取浏览器参数
06-01
这篇博文“JS 获取浏览器参数”可能探讨了如何利用JavaScript来收集关于用户浏览器的信息，包括但不限于浏览器类型、版本、操作系统、屏幕分辨率等。 首先，我们可以使用`navigator`对象来获取浏览器的基本信息。`...
Js与Jq获取浏览器和对象值的方法
10-22
首先，我们来了解如何使用JavaScript获取浏览器的高度和宽度。在纯JavaScript中，可以通过DOM的属性来获取相关值。例如，`document.documentElement.clientWidth` 用于获取浏览器窗口的可视区域宽度；`document....
如何获取html的页面宽度和高度,js获取屏幕，浏览器及网页的宽度和高度
weixin_27024175的博客
06-07 559
在前端的动态逻辑中，有时候需要使用js获取浏览器可视区域，屏幕或是网页的宽度和高度。那么在原生的js代码是能让jq插件中是如何操作的呢？原生js获取各个对象的高度和宽度js代码：IE浏览器：document.body.clientWidth//BODY对象宽度document.body.clientHeight//BODY对象高度document.documentElement.clientW...
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度
grkcsdn的博客
07-07 1310
一、先来大致了解下基本的信息 上图时一张我从别人的博客中找到的，比较系统形象的展示了一些基本的信息。 二、显示器的屏幕信息 screeen.height:屏幕分辨率的高 screen.width:屏幕分辨率的宽 前面这两个数表示：屏幕宽高(屏幕像素) ---- 定值 screen.availHeight:屏幕可用高度（屏幕分辨率的高度-上下测任务栏的高度） screen.availWidth:屏幕可用宽度（屏幕分辨率的宽度-左右侧任务栏的宽度） 前面这两个数表示：屏幕可用宽高(像素) ---- 定值 如图
jquery获取html宽度和高度,jquery 获取元素的 实际宽度和高度
weixin_42314420的博客
07-07 1064
jquery的width()方法获取到的宽度是不包含元素的padding值、margin值、以及border值的元素在实际宽度需要采用其他方法来获取如下：outerWidth()函数用于设置或返回当前匹配元素的外宽度。外宽度默认包括元素的内边距(padding)、边框(border)，但不包括外边距(margin)部分的宽度。你也可以指定参数为true，以包括外边距(margin)部分的宽度。如下...
js获取浏览器及屏幕高度和宽度等信息的方法和onscroll事件
10-19 267
一、方法如下： 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body....
获取浏览器窗口高度宽度大小js/jquery代码
abc20041012的博客
04-23 82
一个是利用jquery来实现的，下面是在加入了jquery库的情况下载做的。 代码如下 复制代码 <script type="text/javascript"> $(document).ready( function() { var h = $(window).height(); alert(h+'http://www.zhutiai.com/5250/'); } ) &...
html js获取图片高度,js获取Html元素的实际宽度高度
weixin_30792221的博客
06-07 524
情况一：宽高都写在样式表里，即外部样式或嵌入式样式，比如#div1{width:120px;}。这种情况通过#div1.style.width拿不到宽度，而通过#div1.offsetWidth才可以获取到宽度。情况二：宽和高是写在行内中，即内联式样式，比如style="width:120px;"，这中情况通过上述2个方法都能拿到宽度。因为id.offsetWidth和id.offsetHeigh...
js获得浏览器高度和宽度 参数
zhouyong0的专栏
06-17 1020
document.documentElement.clientHeight -->浏览器的高度document.documentElement.scrollHeight 全文的高度document.documentElement.scrollTop滚去的高度 function getInfo(){    var s = "";    s += " 网页可见区域宽："+ docu
JS获得浏览器高度和宽度参数
Zoe_Wang_ing的专栏
05-02 1110
document.documentElement.clientHeight -->浏览器的高度 document.documentElement.scrollHeight 全文的高度 document.documentElement.scrollTop滚去的高度 function getInfo() {     var s = "";     s += "
H5手机端JS常用屏幕宽度和高度获取方法
hotlinhao的专栏
07-10 6753
js获取手机屏幕宽度、高度 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.
js获取Html元素的实际宽度高度的方法
10-22
在Web开发中，经常需要获取HTML元素的实际宽度和...`等代码片段，它们演示了如何实际使用这些方法来获取特定元素的高度和宽度。通过这些基础的知识点，前端开发者可以更加灵活地在实际项目中处理布局和样式相关的问题。
js 获取网络图片的高度和宽度的实现方法(变通了下)
10-29
3. 然后，可以通过JavaScript获取DIV的宽度(clientWidth)和高度(clientHeight)，这两个属性分别代表了DIV元素的内部宽度和高度，由于DIV的尺寸是根据背景图片的尺寸自适应的，因此这些尺寸值实际上就是图片的宽度和...
获取页面高度，窗口高度，滚动条高度等参数值getPageSize,getPageScroll
12-12
`getPageSize` 函数则是用来计算整个页面的宽度和高度，以及浏览器窗口的宽度和高度。这个函数同样考虑了各种浏览器之间的差异： 1. 首先，如果浏览器支持 `window.innerHeight` 和 `window.scrollMaxY`，那么页面...
apt-get install 安装的tomcat配置
wonbin2011的专栏
09-19 378
使用apt-get安装的 Tomcat 配置简单，因为大部分基础配置已自动设置。通过以上步骤，你可以调整 Tomcat 的端口、用户权限、部署应用等设置。
Tomcat_WebApp
gege_0606的博客
09-15 906
这个目录包含启动和关闭 Tomcat 的脚本。这是 Tomcat 的配置文件目录，里面的文件用来配置服务器的行为。这个目录包含 Tomcat 运行时需要的 Java 类库和依赖包。大多数情况下，你不需要改动这个目录，它已经包含了 Tomcat 必需的库文件。Tomcat 的日志文件会存放在这里。你可以通过查看这些日志来了解服务器的运行状态、错误信息以及访问记录。这是 Tomcat 临时文件的存放目录。在运行 Web 应用时，有些临时文件会存储在这个目录中。这个目录是 Web 应用程序的部署目录。
XHTML学习
大河之犬的博客
09-20 303
XHTML是一个严格遵循 XML语法规则的 HTML 标准。它是 HTML4 的一种重构版本，结合了 HTML 的灵活性和 XML 的严格性，如今XHTML已经得到了所有主流浏览器的支持文档结构XHTML DOCTYPE 是强制性的中的 XML namespace 属性是强制性的、、 以及 也是强制性的元素语法XHTML 元素必须正确嵌套XHTML 元素必须始终关闭XHTML 元素必须小写XHTML 文档必须有一个根元素。
JSP学生学籍管理系统设计与实现(源代码+论文+开题报告+外文翻译+答辩PPT).zip
最新发布
09-21
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
JavaScript获取浏览器窗口尺寸方法
"这篇博客主要讨论了如何在JavaScript中获取浏览器窗口的高度和宽度，同时提供了一个商城接口的文档，包括不同接口的说明、请求地址、请求方式和基本的请求与响应对象属性。" 在JavaScript中获取屏幕浏览器网页的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值