蝙蝠岛资源网 Design By www.hbtsch.com

首先说一下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动态获取浏览器或页面等容器的宽高详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

标签:
js获取浏览器宽度高度,js获取页面宽度高度

蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

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

暂无详解js动态获取浏览器或页面等容器的宽高的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?