详解js动态获取浏览器或页面等容器的宽高


Posted in Javascript onMarch 13, 2019

首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些:

网页可见区域宽: 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

 接着我们结合实例来实际说明一下:

有时候我们写了100%高度的时候,然后因为是当前页面的子页面,100%的只是父页面,而子页面有下拉条还有内容的话,一些东西就不能都获取到。

如下图:

(我们设置了这个div id为“bg”的高度为100%,但下拉条内容拉下去的时候,还是会发现这个背景高度只是父页面的100%,里面子容器的内容都没有被这个黑色背景覆盖到。)

详解js动态获取浏览器或页面等容器的宽高

详解js动态获取浏览器或页面等容器的宽高

所以在这种时候我们就要开始考虑给这个“bg”设置对应的动态高度。

在js中的初始化方法里写如下代码:

//定义id为bg的高度随内容而变化
  var winHeight=0;
  winHeight=document.body.scrollHeight;
  document.getElementById("bg").style.height=winHeight+"px";
  
}

然后我们再来看效果:

详解js动态获取浏览器或页面等容器的宽高

 好了,这样整个页面都可以被渲染到了。

以上所述是小编给大家介绍的js动态获取浏览器或页面等容器的宽高详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript中的this绑定介绍
Sep 22 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
ajax与302响应代码测试
Oct 23 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
详解jQuery-each()方法
Mar 13 #jQuery
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 #Javascript
react同构实践之实现自己的同构模板
Mar 13 #Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 #Javascript
你可能不知道的CORS跨域资源共享
Mar 13 #Javascript
react项目如何使用iconfont的方法步骤
Mar 13 #Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 #jQuery
You might like
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
创业计划书如何吸引他人眼球
2014/01/10 职场文书
大学生励志演讲稿
2014/04/25 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
离婚协议书范文2016
2016/03/18 职场文书
详解Redis瘦身指南
2021/05/26 Redis
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python