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
javascript 常用获取页面宽高信息 API的更多相关文章
- jQuery 获取页面宽高
无滚动条的情况下(页面宽高比可视区域小):$(document)和$(window)的width.height方法获取的值都是一样的,都是可视区域的宽高即$(document).width()==$( ...
- jq弹窗(获取页面宽高,滚轮高度,始终居中)
jq写一个弹窗,效果如上图所示, 点击按钮弹窗弹出,右上角关闭. 弹窗始终显示在页面中间,无论放大缩小窗口,滚轮滚动. 代码如下: html: <br><br><br&g ...
- js获取页面宽高
网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...
- Javascript之获取屏幕宽高
<head> <title> new document </title> <meta name="generator" content=& ...
- JS图片加载时获取图片宽高信息
; var img = new Image(); img.src = node.find("img[class='img1_1']").attr("src"); ...
- JavaScript中的各种宽高以及位置总结
JavaScript中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动 ...
- android中加载的html获取的宽高不正确
wap页面使用 js库是zepto,按照惯例在$(function(){})中,来获取当前可视区的宽高,但得到的宽高却与预想的相差十万八千里. 原本android手机的浏览器设定的宽高基本是360*6 ...
- 从H264码流中获取视频宽高 (SPS帧) 升级篇
之前写过 <从H264码流中获取视频宽高 (SPS帧)> . 但发现很多局限性,而且有时解出来是错误的. 所以重新去研究了. 用了 官方提供的代码库来解析. 花了点时间,从代码库里单独把解 ...
- 微信 小程序 drawImage wx.canvasToTempFilePath wx.saveFile 获取设备宽高 尺寸问题
以下问题测试环境为微信开发者0.10.102800,手机端iphone6,如有不对敬谢指出. 根据我的测试,context.drawImage,在开发者工具中并不能画出来,只有预览到手机中显示. wx ...
随机推荐
- opencv-python教程学习系列5-处理鼠标事件
前言 opencv-python教程学习系列记录学习python-opencv过程的点滴,本文主要介绍opencv-python处理鼠标事件,坚持学习,共同进步. 系列教程参照OpenCV-Pytho ...
- SUST OJ 1675: Fehead的项目(单调栈)
1675: Fehead的项目 时间限制: 1 Sec 内存限制: 128 MB提交: 41 解决: 27[提交][状态][讨论版] 题目描述 Fehead俱乐部接手了一个项目,为了统计数据,他们 ...
- UWP 在 WebView 中执行 JavaScript 代码(用于模拟用户输入等)
UWP 中使用 WebView 时可以在网页中额外执行一些代码.于是你几乎可以在网页上做任何事情,那些你可以在浏览器控制台中做的事情. 本文将介绍做法. 本文内容 准备环境 执行 JavaScript ...
- Dataframe 新增一列, apply 通用方法
df['c'] = df.apply(lambda row: 1 if row['a'] < 0 and row['b'] > 0 else 0, axis=1) apply 是一个好方法 ...
- Spring目前用到的知识点
2017/7/28 目前的工作,spring用到到的地方 在当前类有下列的代码 private BookDao bookDao bookDao.调用方法 点开这个方法,声明指向的是BookDao这个接 ...
- telinit:Did not receive a reply.Possible causes include:the remote application did not send a reply, the message bus security policy blocked the reply, the reply timeout expired
问题: Enabling /etc/fstab swaps: [ok]telinit:Did not receive a reply.Possible causes include:the remot ...
- php curl curl_getinfo()返回参数详解
php curl请求在curl_exec()函数执行之后,可以使用curl_getinfo()函数获取CURL请求输出的相关信息,示例代码如下: curl_exec($ch);$info = curl ...
- Package rdkafka was not found in the pkg-config search path.
问题 在使用confluent-kafka-go 时遇到如下问题: $ go build t.go # pkg-config --cflags rdkafka Package rdkafka was ...
- [C++ Primer] : 第10章: 泛型算法
概述 泛型算法: 称它们为"算法", 是因为它们实现了一些经典算法的公共接口, 如搜索和排序; 称它们是"泛型的", 是因为它们可以用于不同类型的元素和多种容器 ...
- 【jmeter】jmeter之-聚合点
集合点:简单来理解一下,虽然我们的“性能测试”理解为“多用户并发测试”,但真正的并发是不存在的,为了更真实的实现并发这感念,我们可以在需要压力的地方设置集合点, 还拿那个用户和密码的地方,每到输入用户 ...