详解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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
ScrollDown的基本操作示例
Jun 09 Javascript
fmt:formatDate的输出格式详解
Jan 09 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
JS forEach跳出循环2种实现方法
Jun 24 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版自动生成文章摘要
2008/07/23 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
js异或加解密效果代码
2008/06/25 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
js实现日历
2020/11/07 Javascript
PyCharm中代码字体大小调整方法
2019/07/29 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
基于python实现对文件进行切分行
2020/04/26 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
金融专业个人求职信
2013/09/22 职场文书
打架检讨书50字
2014/01/11 职场文书
淘宝活动策划方案
2014/02/06 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
校园文明倡议书
2014/05/16 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
行政介绍信范文
2015/05/04 职场文书
单位介绍信格式范文
2015/05/04 职场文书