zoukankan      html  css  js  c++  java
  • window.screen.height和window.screen.availHeight和document.body.clientHeight和document.documentElement.clientHeight

    说这几个属性前 我说一下我的设备

    我的设备有两个,一个高度为1080的显示器,一个高度为800的电脑

    第一种:window.screen.height

    这个方法是获取用户电脑屏幕的高度,是不关浏览器或者顶部工具栏跟底部工具栏的高度的

    当我在高度为1080的我的显示屏屏幕上打印

    window.screen.height
    1080

    当我在我的电脑上打印

    window.screen.height
    800

    是的 ,这个属性就是电脑的高度

    第二个属性:window.screen.availHeight

    这个属性,看字面意思,顾名思义,就是电脑屏幕的可用高度,

    那当然就是电脑屏幕减掉顶部工具栏跟底部工具栏的高度

    我在显示器上打印了这个属性,会得到以下

    window.screen.availHeight
    1057

    1057是等于=1080(电脑屏幕)-23(顶部工具栏)

    因为我的显示器上面没有底部工具栏

    好,现在我在我的电脑上打印

    window.screen.availHeight
    714

    是714=800-顶部工具栏(22)-底部工具栏(64)

    第三个:document.body.clientHeight

    这个属性只跟浏览器的高度有关

    当时我在显示器上打印的时候,我打印来

    document.body.clientHeight
    3367

    我一脸懵逼,这怎么会有三千多高度呢

    我屏幕一共才1080

    后来我才想通,是浏览器里面的整个页面高度,因为我打开一个页面调试的时候是有滚动条的

    第四个:document.documentElement.clientHeight

    这个属性就是只跟浏览器有关,是浏览器里面的页面的可用可见高度

    就还是我刚才那个显示器打印

    document.documentElement.clientHeight
    880

    是的 我想说的就是这些了,反正我研究了一下这个之后,对这几个获得高度的属性差不多知道了

    还有什么的话欢迎各位补充哦

    第五个:window.innerHeight

  • 相关阅读:
    Java 破解谷歌翻译api,可以实现程序自动化翻译文章
    如何搭建高可用redis架构?
    架构师带你玩转分布式锁
    Java8内存模型—永久代(PermGen)和元空间(Metaspace)
    【SFA官方翻译】使用 Kubernetes、Spring Boot 2.0 和 Docker 的微服务快速指南
    kafka为什么这么优秀!
    讲道理,为什么分布式一定要有Redis?
    Windows系统内存分析工具的介绍
    colspan width issue
    OpenGL ES3 非常好的系列文章
  • 原文地址:https://www.cnblogs.com/lwwen/p/7272698.html
Copyright © 2011-2022 走看看