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

最新推荐文章于 2024-10-30 17:36:48 发布
最新推荐文章于 2024-10-30 17:36:48 发布
阅读量395 收藏
点赞数
分类专栏： 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
关注
专栏目录
如何获取html的页面宽度和高度,js获取屏幕，浏览器及网页的宽度和高度
weixin_27024175的博客
06-07 575
在前端的动态逻辑中，有时候需要使用js获取浏览器可视区域，屏幕或是网页的宽度和高度。那么在原生的js代码是能让jq插件中是如何操作的呢？原生js获取各个对象的高度和宽度js代码：IE浏览器：document.body.clientWidth//BODY对象宽度document.body.clientHeight//BODY对象高度document.documentElement.clientW...
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度
grkcsdn的博客
07-07 1321
一、先来大致了解下基本的信息 上图时一张我从别人的博客中找到的，比较系统形象的展示了一些基本的信息。 二、显示器的屏幕信息 screeen.height:屏幕分辨率的高 screen.width:屏幕分辨率的宽 前面这两个数表示：屏幕宽高(屏幕像素) ---- 定值 screen.availHeight:屏幕可用高度（屏幕分辨率的高度-上下测任务栏的高度） screen.availWidth:屏幕可用宽度（屏幕分辨率的宽度-左右侧任务栏的宽度） 前面这两个数表示：屏幕可用宽高(像素) ---- 定值 如图
jquery获取html宽度和高度,jquery 获取元素的 实际宽度和高度
weixin_42314420的博客
07-07 1086
jquery的width()方法获取到的宽度是不包含元素的padding值、margin值、以及border值的元素在实际宽度需要采用其他方法来获取如下：outerWidth()函数用于设置或返回当前匹配元素的外宽度。外宽度默认包括元素的内边距(padding)、边框(border)，但不包括外边距(margin)部分的宽度。你也可以指定参数为true，以包括外边距(margin)部分的宽度。如下...
js和jQuery获取浏览器窗口的高度、宽度的方法详解
MOONCOM的博客
11-11 7800
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari： window.innerHeight - 浏览器窗口的内部高度window.innerWidth - 浏览器窗口的内部宽度 对于 Internet Explorer 8、7、6、5： docume
js获取浏览器及屏幕高度和宽度等信息的方法和onscroll事件
10-19 276
一、方法如下： 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body....
获取浏览器窗口高度宽度大小js/jquery代码
abc20041012的博客
04-23 87
一个是利用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 542
情况一：宽高都写在样式表里，即外部样式或嵌入式样式，比如#div1{width:120px;}。这种情况通过#div1.style.width拿不到宽度，而通过#div1.offsetWidth才可以获取到宽度。情况二：宽和高是写在行内中，即内联式样式，比如style="width:120px;"，这中情况通过上述2个方法都能拿到宽度。因为id.offsetWidth和id.offsetHeigh...
js获得浏览器高度和宽度 参数
zhouyong0的专栏
06-17 1033
document.documentElement.clientHeight -->浏览器的高度document.documentElement.scrollHeight 全文的高度document.documentElement.scrollTop滚去的高度 function getInfo(){    var s = "";    s += " 网页可见区域宽："+ docu
JS获得浏览器高度和宽度参数
Zoe_Wang_ing的专栏
05-02 1114
document.documentElement.clientHeight -->浏览器的高度 document.documentElement.scrollHeight 全文的高度 document.documentElement.scrollTop滚去的高度 function getInfo() {     var s = "";     s += "
JS 获取浏览器参数
06-01
这篇博文“JS 获取浏览器参数”可能探讨了如何利用JavaScript来收集关于用户浏览器的信息，包括但不限于浏览器类型、版本、操作系统、屏幕分辨率等。 首先，我们可以使用`navigator`对象来获取浏览器的基本信息。`...
Js与Jq获取浏览器和对象值的方法
10-22
首先，我们来了解如何使用JavaScript获取浏览器的高度和宽度。在纯JavaScript中，可以通过DOM的属性来获取相关值。例如，`document.documentElement.clientWidth` 用于获取浏览器窗口的可视区域宽度；`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`，那么页面...
Chrome和Firefox如何保护用户的浏览数据
weixin_43772292的博客
10-30 895
无论是Chrome的密码导出、隐私模式还是书签栏隐藏功能，还是Firefox的隐私保护工具、容器标签页以及隐私浏览模式，都体现了各自对用户隐私的重视。此外，Firefox还提供了严格的Cookie管理策略，允许用户自定义哪些网站可以存储Cookie，从而更好地控制自己的浏览数据。隐私模式是Chrome浏览器提供的一种特殊浏览方式，它允许用户在不留下任何历史记录、Cookie、表单数据和密码的情况下进行浏览。需要注意的是，虽然隐私模式可以隐藏你的浏览记录，但它并不能完全防止网络攻击或阻止网站收集你的信息。
Firefox和Chrome谁的插件生态系统更完善
2403_86768603的博客
10-29 1363
在选择时，用户可以根据自己的需求和偏好来决定，比如注重隐私和定制化的用户可能会倾向于Firefox，而追求广泛兼容和便捷同步的用户则可能更喜欢Chrome。Firefox还支持拖放式安装（即将下载的.crx或.xpi文件直接拖放到地址栏），并允许用户自由调整插件的顺序、启用或禁用特定站点的插件，以及查看插件的版本信息和权限要求，这些细节设计提升了用户体验。Chrome的Web Store拥有海量插件，数量上远超Firefox，这得益于Google庞大的用户基础和早期对插件生态的重视。
嵌入式浏览器 -- Chromium VS Firefox
Interview_TC的博客
10-29 1348
嵌入式浏览器是嵌入式系统中的核心组件之一，用于为设备提供网络访问能力和内容显示功能。与传统PC浏览器相比，嵌入式浏览器更加注重性能优化和资源效率，同时确保核心功能可用，如HTML渲染、JavaScript支持和多媒体处理。在物联网、智能家居、车载系统和医疗设备等应用中，嵌入式浏览器已成为设备与用户、设备与云端数据交互的关键界面。
XHTML 简介
wjs2024的博客
10-04 891
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
智慧建造总体策划方案（76页）.pptx
最新发布
11-02
智慧建造总体策划方案（76页）
JavaScript获取浏览器窗口尺寸方法
"这篇博客主要讨论了如何在JavaScript中获取浏览器窗口的高度和宽度，同时提供了一个商城接口的文档，包括不同接口的说明、请求地址、请求方式和基本的请求与响应对象属性。" 在JavaScript中获取屏幕浏览器网页的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值