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

花点时间整理了一下,获取页面宽高信息的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

javascript 常用获取页面宽高信息 API的更多相关文章

  1. jQuery 获取页面宽高

    无滚动条的情况下(页面宽高比可视区域小):$(document)和$(window)的width.height方法获取的值都是一样的,都是可视区域的宽高即$(document).width()==$( ...

  2. jq弹窗(获取页面宽高,滚轮高度,始终居中)

    jq写一个弹窗,效果如上图所示, 点击按钮弹窗弹出,右上角关闭. 弹窗始终显示在页面中间,无论放大缩小窗口,滚轮滚动. 代码如下: html: <br><br><br&g ...

  3. js获取页面宽高

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

  4. Javascript之获取屏幕宽高

    <head> <title> new document </title> <meta name="generator" content=& ...

  5. JS图片加载时获取图片宽高信息

    ; var img = new Image(); img.src = node.find("img[class='img1_1']").attr("src"); ...

  6. JavaScript中的各种宽高以及位置总结

    JavaScript中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动 ...

  7. android中加载的html获取的宽高不正确

    wap页面使用 js库是zepto,按照惯例在$(function(){})中,来获取当前可视区的宽高,但得到的宽高却与预想的相差十万八千里. 原本android手机的浏览器设定的宽高基本是360*6 ...

  8. 从H264码流中获取视频宽高 (SPS帧) 升级篇

    之前写过 <从H264码流中获取视频宽高 (SPS帧)> . 但发现很多局限性,而且有时解出来是错误的. 所以重新去研究了. 用了 官方提供的代码库来解析. 花了点时间,从代码库里单独把解 ...

  9. 微信 小程序 drawImage wx.canvasToTempFilePath wx.saveFile 获取设备宽高 尺寸问题

    以下问题测试环境为微信开发者0.10.102800,手机端iphone6,如有不对敬谢指出. 根据我的测试,context.drawImage,在开发者工具中并不能画出来,只有预览到手机中显示. wx ...

随机推荐

  1. SQL 基础--> NEW_VALUE 的使用

    --=============================== -- SQL 基础--> NEW_VALUE 的使用 --=============================== 通常 ...

  2. 学会从后往前遍历,例 [LeetCode] Pascal's Triangle II,剑指Offer 题4

    当我们需要改变数组的值时,如果从前往后遍历,有时会带来很多麻烦,比如需要插入值,导致数组平移,或者新的值覆盖了旧有的值,但旧有的值依然需要被使用.这种情况下,有时仅仅改变一下数组的遍历方向,就会避免这 ...

  3. ubuntu16.04-caffe安装过程详解-草稿

    前言 目前主要模块都是基于深度学习展开的,虽然知道一些深度学习的基础知识,只是皮毛,还没有使用深度学习框架练手甚至深入,故开始着手深度学习的实操和深入学习. 操作步骤 参考 1.Ubuntu16.04 ...

  4. 【网络通讯】Nat知识了解

    一.Nat的含义 NAT(Network Address Translation,网络地址转换)是1994年提出的.当在专用网内部的一些主机本来已经分配到了本地IP地址(即仅在本专用网内使用的专用地址 ...

  5. Eclipse+Spring学习(一)环境搭建(转)

    最近由于投了一家公司实习,他要java工程师,而我大学3年的精力都花到了ASP.NET和前端上面,到找工作的时候才发现大公司不要.NET的,所以马上转型java...由于网上的高手都不屑于写这类文章, ...

  6. day37 mysql数据库学习

    3.什么是数据库 用来存储数据的仓库 数据是以文件的形式保存 海峰补充内容   ↓ 4 数据库服务器.数据管理系统.数据库.表与记录的关系(重点理解!!!) 记录:1 刘海龙  324245234 2 ...

  7. day41 mysql 学习 练习题 重要*****

    MySQL 练习题[二1.表如下: 收获和注意点:***** #1 GROUP by 可以放到where s_id in ()条件局后边 GROUP BY s_id having 详见题12 #2 做 ...

  8. sql server 表变量存储临时查询数据

    对于使用sql server 编写存储过程或者类似的sql 查询的时候我们使用表变量进行临时数据的存储,可以方便我们进行下来的数据处理 表变量的使用类似如下: declare @userinfo ta ...

  9. spring boot 项目文件结构

    启动类建议放在RootPackage的原因: 根据SpringBoot的内置实现,Spring默认从@ComponentScan注解所在的位置开始向后扫描,也就是说,只要我们将组件放在启动类所在的Ro ...

  10. hybrid app 知识点

    WebView能加载显示网页,可以将其视为一个浏览器. Android系统中,叫做 WebView ios系统中,新版是 WKWebView,旧版是 UIWebView Native App 和 We ...