详解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 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
动态加载JavaScript文件的两种方法
Apr 22 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
深入理解Node.js中的进程管理
Mar 13 Javascript
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
通过js随机函数Math.random实现乱序
May 19 Javascript
Javascript Symbol原理及使用方法解析
Oct 22 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
详解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
PHP5+UTF8多文件上传类
2008/10/17 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
php魔术变量用法实例详解
2014/11/13 PHP
php实现计数器方法小结
2015/01/05 PHP
如何使用php实现评委评分器
2015/07/31 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
浅谈numpy数组的几种排序方式
2017/12/15 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
python生成带有表格的图片实例
2019/02/03 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
德国网上超市:myTime.de
2019/08/26 全球购物
二年级小学生评语
2014/04/21 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
单位推荐信范文
2015/03/27 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis