zoukankan      html  css  js  c++  java
  • javascript 常用获取页面宽高信息 API

    在页面的构建中 常常会需要获取页面的一些宽高信息,例如实现 惰性加载图片 需要获取页面的可见区域高度 和 已滚动区域的高度,以判断图片所在位置是否可见来决定加载图片的时间,

    花点时间整理了一下,获取页面宽高信息的API

    持续整理中...

    在IE中:
    document.body.clientWidth ==> BODY对象宽度
    document.body.clientHeight ==> BODY对象高度
    document.documentElement.clientWidth ==> 可见区域宽度
    document.documentElement.clientHeight ==> 可见区域高度


    在FireFox中:
    document.body.clientWidth ==> BODY对象宽度
    document.body.clientHeight ==> BODY对象高度
    document.documentElement.clientWidth ==> 可见区域宽度
    document.documentElement.clientHeight ==> 可见区域高度

    在Opera中: 
    document.body.clientWidth ==> 可见区域宽度
    document.body.clientHeight ==> 可见区域高度
    document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
    document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)


    而如果没有定义W3C的标准,则
    IE为:
    document.documentElement.clientWidth ==> 0
    document.documentElement.clientHeight ==> 0


    FireFox为:
    document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)


    Opera为:
    document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
    真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。

    网页可见区域宽:
    document.body.clientWidth

    网页可见区域高:
    document.body.clientHeight 

    网页可见区域宽:
    document.body.offsetWidth(包括边线的宽) 

    网页可见区域高:
    document.body.offsetHeight(包括边线的宽) 

    网页正文全文宽:
    document.body.scrollWidth 

    网页正文全文高:
    document.body.scrollHeight 

    网页被卷去的高:
    document.body.scrollTop 

    window.pageYOffset

    网页被卷去的左:
    document.body.scrollLeft 

    window.pageXOffset

    网页正文部分上:
    window.screenTop 

    网页正文部分左:
    window.screenLeft 

    屏幕分辨率的高:
    window.screen.height 

    屏幕分辨率的宽:
    window.screen.width 

    屏幕可用工作区高度:
    window.screen.availHeight 

    屏幕可用工作区宽度:
    window.screen.availWidth 

  • 相关阅读:
    P3368 【模板】树状数组 2
    P3374 【模板】树状数组 1
    BZOJ 2654
    BZOJ 1016
    BZOJ 4870
    BZOJ 4868
    BZOJ 1503
    P3379 【模板】最近公共祖先(LCA)
    雅礼2017国庆1-1
    使用 CefSharp 网页显示问题
  • 原文地址:https://www.cnblogs.com/dongcanliang/p/6672718.html
Copyright © 2011-2022 走看看