一些常用的获取页面高度和宽度的js用法

最新推荐文章于 2024-03-12 22:27:40 发布
最新推荐文章于 2024-03-12 22:27:40 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： JavaScript 文章标签： JavaScript获取页面宽度高度大全 html web前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yyang_csdn/article/details/53082407
版权

在开发中，经常会用到页面或者页面某一部分的高度和宽度，网上答案很多，我在这里也整理了一些常用的获取高度和宽度的js用法，供开发者参考：

页面可见区域宽：document.body.clientWidth
页面可见区域高：document.body.clientHeight
页面可见区域宽：document.body.offsetWidth(包括边线的宽)
页面可见区域高：document.body.offsetHeight(包括边线的宽)
页面正文全文宽：document.body.scrollWidth
页面正文全文高：document.body.scrollHeight
页面被卷去的高：document.body.scrollTop(IE7无效)
页面被卷去的左：document.body.scrollLeft(IE7无效)

页面被卷去的高：document.documentElement.scrollTop(IE7有效)

页面被卷去的左：document.documentElement.scrollLeft(IE7有效)
页面正文部分上：window.screenTop
页面正文部分左：window.screenLeft
屏幕页面分辨率的高：window.screen.height
屏幕页面分辨率的宽：window.screen.width
屏幕页面可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

相对于窗口左上角的X：window.event.clientX

相对于窗口左上角的Y：window.event.clientY
相对于整个页面的X：window.event.X
相对于整个页面的Y：window.event.Y

关于页面滚动条的距离，可以这样使用var top = document.body.scrollTop || document.documentElement.scrollTop;

Yyang_csdn
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript常用对象梳理
06-23
JS中的常用对象[转载]web 技术 2010-06-05 15:00:30 阅读3 评论0 字号：大中小 订阅 [removed] Window For JavaScript 熟练window对象的open、close、alert、confirm、prompt、setTimeout、clearTimeout、...
html获取页面高度,js获取各种高度
weixin_42122881的博客
06-04 7823
监听浏览器窗口大小改先来一个浏览器窗口大小改变的事件，用来查看浏览器窗口的大小被改变可以触发一些函数window.onresize 浏览器窗口大小改变事件window.onresize = function () {console.log('浏览器窗口的大小被改变了');something.....}复制代码在写js的时候偶尔需要获取各种高度，比如；浏览器高度，页面高度，滚动高度等。1. 网页全文...
js获取页面的各种高度大全
sunshineboysy的博客
07-17 1万+
1，获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height window.screen.width2， 获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight window.screen.availWidth 3，网页全文的高度和宽度： document.body.scrollHeight document.body...
JS如何获取网页的宽高
最新发布
子玉的博客
03-12 487
这些方法将返回视口（viewport）的宽度和高度，即可见区域的宽度和高度，不包括滚动条和其他浏览器窗口装饰的部分。要获取网页的宽度和高度，可以使用 JavaScript 来动态获取。这些代码将返回整个文档的宽度和高度，包括滚动条和隐藏部分。希望这些信息能够帮助到你。如有其他问题，欢迎随时向我提问。
js获取页面宽高
qq_51741194的博客
04-17 1595
通过深入 Document 内部对 body 进行检测，获取窗口大小。
JS获取各种屏幕的宽度和高度
m0_48524046的博客
12-09 7012
JS获取各种屏幕的宽度和高度
Js/Jquery获取网页屏幕可见区域高度（转）
a4636666的博客
03-27 314
原文地址：https://www.cnblogs.com/whb17bcdq/p/6513766.html document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 ...
JavaScript 空间坐标的使用
01-19
文档坐标在页面滚动时不发生改变 视口坐标的操作需要考虑滚动条的位置 视口文档 视口坐标需要知道滚动条位置才可以进行计算，有以下几种方式获取滚动位置 方法 说明 注意 window.innerWidth 视口宽度 包括滚动...
程序天下:JavaScript实例自学手册
07-08
21.7 使用DOM获取页面中某控件的属性 21.8 将某行排在表格的最后 21.9 动态删除页面中的元素 21.10 克隆表格 21.11 拖动表格行改变顺序 21.12 表格操作常用方法 第22章 流行应用：AJAX和Property的应用技巧 22.1 ...
JavaScript详解(第2版)
04-25
　12.6.2　改变图片的高度和宽度属性　 　12.7　应知应会　 　练习　 　第13章　事件处理　 　13.1　事件处理函数介绍　 　13.2　事件处理的内联模型　 　13.2.1　HTML和事件处理函数　 　13.2.2　设置事件处理函数...
《程序天下：JavaScript实例自学手册》光盘源码
02-08
21.7 使用DOM获取页面中某控件的属性 21.8 将某行排在表格的最后 21.9 动态删除页面中的元素 21.10 克隆表格 21.11 拖动表格行改变顺序 21.12 表格操作常用方法 第22章 流行应用：AJAX和Property的应用技巧 22.1 ...
js获取当前页面高度
九亿宅男的梦的博客
10-08 2万+
Javascript: 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scro...
获取页面高度和宽度等
卡卡的笔录
12-12 2459
获取页面相关的高度 获取网页可见区域的高（不包括菜单栏） var clientHeight = document.documentElement.clientHeight || document.body.clientHeight; 获取页面body的高（不包括菜单栏，包括滚动条滚动的高度） var bodyHeight = document.documentElement.off.........
JS：获取元素宽高的几种方式
热门推荐
干饭搬砖两不误。
02-02 3万+
关于JS获取元素宽高时，有的获取不到想要的值
js获取浏览器宽度高度（整理）
天马3798
12-10 1万+
● window.innerHeight： 浏览器内页面可用高度，此高度包含了水平滚动条的高度(若存在)。● window.innerWidth： 浏览器内页面可用宽度，此宽度包含了垂直滚动条的宽度(若存在)。● window.outerWidth： 浏览器宽度，包含了浏览器边框所以这种方式不常用。一般情况作为前端获取浏览器宽度，主要是指获取body的宽度，可操作的可视范围宽度。重点，jquery获取的宽度=浏览器的可视宽度-滚动条的宽度（如果有滚动条）
js获取网页的宽高
林中明月间丶
05-14 586
转自：https://blog.csdn.net/sunlizhen/article/details/77198570 在没有声明DOCTYPE的IE中，浏览器显示窗口大小只能以下获取： document.body.offsetWidth document.body.offsetHeight 在声明了DOCTYPE的浏览器中，可以用以下来获取浏览器显示窗口大小： document.documen...
html 关于获取页面高度方法
xiaozaq的博客
09-07 1350
返回整个屏幕的像素高度，即分辨率高度。如常见的pc系统分辨率是1920*1080，那么返回的值就是1080。对应window.screen.width返回就是1920。即window.outerHeight-页签高度 - 地址栏高度 - 书签栏高度。如果是chrome浏览器模拟手机的话，返回的就是模拟的手机分辨率，与电脑分辨率无关。返回 window.screen.height - 任务栏高度。一般我们页面中希望获取到的就是window.innerHeight。浏览器高度，包含了地址栏、书签栏等高度。
js怎样获取浏览器窗口尺寸
子玉的博客
10-29 754
总结起来，我们可以使用 `window.innerWidth` 和 `window.innerHeight` 属性或 `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 属性来获取浏览器窗口的尺寸，以及使用 `screen.width` 和 `screen.height` 属性来获取整个屏幕的尺寸。注意，这些方法获取的是浏览器窗口的尺寸，而不是整个屏幕的尺寸。
js获取屏幕、浏览器、页面的宽度和高度
m0_60316162的博客
07-06 2160
window、document.body和document.documentElement区别 window是浏览器的窗口，他是一个顶层对象，保存着 DOM，BOM，核心JS 等所有内容，而不是另一个对象的属性； document对象是window的子属性，是当前显示于窗口或框架内的一个文档。 documentElement是整个节点树的根节点root，即<html>； body是DOM对象里的body子节点，即body标签，包含在<html>内部； 在标准浏览器里面，h
javascript使用以下知识点进行网页设计和js特效并写出代码1、 常用鼠标与键盘事件 2、 事件对象的绑定与使用 3、 排他操作 4、 Bom获取窗体属性 5、 Bom相关属性的使用 6、 Bom相关方法的使用 7、 Offset的使用 8、
06-03
DOM节点的操作和属性 1. 常用鼠标与键盘事件： ```javascript // 鼠标事件 element.addEventListener('click', function(event) { // 点击事件 }); element.addEventListener('mousedown', function(event) { // 按下鼠标键事件 }); element.addEventListener('mouseup', function(event) { //开鼠标键事件 }); element.addEventListener('mousemove', function(event) { // 鼠标移动事件 }); element.addEventListener('mouseover', function(event) { // 鼠标移入事件 }); element.addEventListener('mouseout', function(event) { // 鼠标移出事件 }); // 键盘事件 element.addEventListener('keydown', function(event) { // 按下键盘事件 }); element.addEventListener('keyup', function(event) { // 松开键盘事件 }); element.addEventListener('keypress', function(event) { // 按键事件 }); ``` 2. 事件对象的绑定与使用： ```javascript element.addEventListener('click', function(event) { // 阻止默认行为 event.preventDefault(); // 阻止事件冒泡 event.stopPropagation(); // 获取事件目标 event.target; // 获取事件类型 event.type; // 获取触发事件的元素 event.currentTarget; }); ``` 3. 排他操作： ```javascript const elements = document.querySelectorAll('.item'); elements.forEach(function(element) { element.addEventListener('click', function(event) { // 移除所有元素的 active 类 elements.forEach(function(item) { item.classList.remove('active'); }); // 添加当前元素的 active 类 element.classList.add('active'); }); }); ``` 4. Bom获取窗体属性： ```javascript // 获取窗口宽度 window.innerWidth; // 获取窗口高度 window.innerHeight; // 获取文档宽度 document.documentElement.clientWidth; // 获取文档高度 document.documentElement.clientHeight; ``` 5. Bom相关属性的使用： ```javascript // 获取当前页面的url window.location.href; // 获取当前页面的域名 window.location.hostname; // 获取当前页面的路径 window.location.pathname; // 获取当前页面的协议 window.location.protocol; ``` 6. Bom相关方法的使用： ```javascript // 跳转到指定url window.location.href = 'https://www.example.com'; // 刷新页面 window.location.reload(); // 后退一页 window.history.back(); // 前进一页 window.history.forward(); ``` 7. Offset的使用： ```javascript // 获取元素距离文档顶部的距离 element.offsetTop; // 获取元素距离文档左侧的距离 element.offsetLeft; // 获取元素的宽度 element.offsetWidth; // 获取元素的高度 element.offsetHeight; ``` 8. DOM节点的操作和属性： ```javascript // 创建元素节点 const element = document.createElement('div'); // 设置元素属性 element.setAttribute('id', 'my-div'); element.setAttribute('class', 'my-class'); // 获取元素属性 element.getAttribute('id'); element.getAttribute('class'); // 添加元素到文档中 document.body.appendChild(element); // 删除元素 document.body.removeChild(element); // 获取元素的子元素 element.children; // 获取元素的父元素 element.parentNode; ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值