zoukankan      html  css  js  c++  java
  • Web中的宽和高

    不同的宽高定义

    //网页可见区域宽
    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 
    //屏幕设置(位彩色)
    window.screen.colorDepth
    //屏幕设置(像素/英寸)
    window.screen.deviceXDPI 
    //BODY对象宽度
    document.body.clientWidth
    //BODY对象高度
    document.body.clientHeight
    //可见区域宽度
    document.documentElement.clientWidth
    //可见区域高度
    document.documentElement.clientHeight

    获取不同宽高的方法

    var winWidth;
    var winHeight;
    // 获取窗口宽度
    if (windows.innerWidth)
    {
    winWidth = windows.innerWidth;
    }
    else if ((document.body) && (document.body.clientWidth))
    {
    winWidth = document.body.clientWidth;
    }
    // 获取窗口高度
    if (windows.innerHeight)
    {
    winHeight = windows.innerHeight;
    }
    else if ((document.body) && (document.body.clientHeight))
    {
    winHeight = document.body.clientHeight;
    }
    // 通过深入 Document 内部对 body 进行检测,获取窗口大小
    if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
    {
    winHeight = document.documentElement.clientHeight;
    winWidth = document.documentElement.clientWidth;
    }

    ===================2015年12月16日更新====================

    Window对象 

    有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。

    对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

    window.innerHeight //浏览器窗口的内部高度
    window.innerWidth //浏览器窗口的内部宽度

    对于 Internet Explorer 8、7、6、5:

    document.documentElement.clientHeight
    document.documentElement.clientWidth

    或者

    document.body.clientHeight
    document.body.clientWidth

    实用的 JavaScript 方案(涵盖所有浏览器):

    <script>
        var winWidth=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        var winHeight=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    </script>

    Screen对象

    window.screen 对象在编写时可以不使用 window 这个前缀。

    screen.availWidth //可用的屏幕宽度
    screen.availHeight //可用的屏幕高度
  • 相关阅读:
    截取
    逃避系统警察
    刷题
    排队
    侦察兵
    朋友
    楼层
    解码
    倒水
    魔法阵
  • 原文地址:https://www.cnblogs.com/zcynine/p/5003094.html
Copyright © 2011-2022 走看看