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 

  • 相关阅读:
    UVA11988 Broken Keyboard (a.k.a. Beiju Text)【输入输出】
    UVA11645 Bits【位运算+大数】
    运维工程师和网络工程师的区别?
    一句话总结云计算是什么
    面向切面编程
    Entity FrameWork和Dapper的使用
    使用Autofac实现依赖注入注入
    亲手搭建一个基于Asp.Net WebApi的项目基础框架4
    亲手搭建一个基于Asp.Net WebApi的项目基础框架3
    亲手搭建一个基于Asp.Net WebApi的项目基础框架2
  • 原文地址:https://www.cnblogs.com/dongcanliang/p/6672718.html
Copyright © 2011-2022 走看看