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

     更新时间:2019年03月13日 16:45:11   作者:Yubaba丶   我要评论

    这篇文章主要介绍了js动态获取浏览器或页面等容器的宽高,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    首先说一下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

     接着我们结合实例来?#23548;?#35828;明一下:

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

    如下图:

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

    所以在这?#36136;?#20505;我们就要开始考虑给这个“bg”设置对应的动态高?#21462;?/p>

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

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

    然后我们再来看效果:

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

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

    相关文章

    最新评论

    山东群英会开奖查询