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 

  • 相关阅读:
    开启CTF大门
    关于windows下scapy出现log_runtime问题
    Python关于Threading暂停恢复解决办法
    angr入门之CLE
    Linux信号量
    IDApython 命令
    Array 数组对象
    随机数 random()
    四舍五入round()
    向下取整floor()
  • 原文地址:https://www.cnblogs.com/dongcanliang/p/6672718.html
Copyright © 2011-2022 走看看