js 和 jquery 获取页面和滚动条的高度 视口高度文档高度
- js 和 jquery 获取页面和滚动条的高度
- //页面位置及窗口大小
- function GetPageSize() {
- var scrW, scrH;
- if(window.innerHeight
- && window.scrollMaxY)
- { // Mozilla
- scrW =
- window.innerWidth + window.scrollMaxX;
- scrH = window.innerHeight +
- window.scrollMaxY;
- }
- else if(document.body.scrollHeight >
- document.body.offsetHeight)
- { // all but IE Mac
- scrW =
- document.body.scrollWidth;
- scrH = document.body.scrollHeight;
- } else
- if(document.body)
- { // IE Mac
- scrW = document.body.offsetWidth;
- scrH = document.body.offsetHeight;
- }
- var winW, winH;
- if(window.innerHeight)
- { // all except IE
- winW =
- window.innerWidth;
- winH = window.innerHeight;
- } else if
- (document.documentElement &&
- document.documentElement.clientHeight)
- { // IE 6 Strict Mode
- winW =
- document.documentElement.clientWidth;
- winH =
- document.documentElement.clientHeight;
- } else if (document.body) { //
- other
- winW = document.body.clientWidth;
- winH =
- document.body.clientHeight;
- } // for small pages with total size less
- then the viewport
- var pageW = (scrW<winW) ? winW : scrW;
- var pageH =
- (scrH<winH) ? winH : scrH;
- return {PageW:pageW, PageH:pageH,
- WinW:winW, WinH:winH};
- };
- //滚动条位置
- function GetPageScroll()
- {
- var x, y;
- if(window.pageYOffset)
- { // all except IE
- y =
- window.pageYOffset;
- x = window.pageXOffset;
- } else
- if(document.documentElement && document.documentElement.scrollTop)
- { // IE 6 Strict
- y = document.documentElement.scrollTop;
- x
- = document.documentElement.scrollLeft;
- } else if(document.body) { // all
- other IE
- y = document.body.scrollTop;
- x =
- document.body.scrollLeft;
- }
- return {X:x,
- Y:y};
- }
- jquery
- 获取浏览器显示区域的高度 :
- $(window).height();
- 获取浏览器显示区域的宽度 :$(window).width();
- 获取页面的文档高度
- :$(document).height();
- 获取页面的文档宽度 :$(document).width();
- 获取滚动条到顶部的垂直高度
- :$(document).scrollTop();
- 获取滚动条到左边的垂直宽度 :$(document).scrollLeft();
- 计算元素位置和偏移量
- offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。
- offset(options, results)
- options.relativeTo 指定相对计
- 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
- options.scroll 是否把
- 滚动条计算在内,默认TRUE
- options.padding 是否把padding计算在内,默认false
- options.margin
- 是否把margin计算在内,默认true
- options.border 是否把边框计算在内,默认true
- http://www.cnblogs.com/hoojo/archive/2012/02/16/2354663.html
- alert($(window).height()); //浏览器当前窗口可视区域高度
- alert($(document).height()); //浏览器当前窗口文档的高度
- alert($(document.body).height());//浏览器当前窗口文档body的高度
- alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
- alert($(window).width()); //浏览器当前窗口可视区域宽度
- alert($(document).width());//浏览器当前窗口文档对象宽度
- alert($(document.body).width());//浏览器当前窗口文档body的高度
- alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
- // 获取页面的高度、宽度
- function getPageSize() {
- var xScroll, yScroll;
- if (window.innerHeight && window.scrollMaxY) {
- xScroll = window.innerWidth + window.scrollMaxX;
- yScroll = window.innerHeight + window.scrollMaxY;
- } else {
- if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
- xScroll = document.body.scrollWidth;
- yScroll = document.body.scrollHeight;
- } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
- xScroll = document.body.offsetWidth;
- yScroll = document.body.offsetHeight;
- }
- }
- var windowWidth, windowHeight;
- if (self.innerHeight) { // all except Explorer
- if (document.documentElement.clientWidth) {
- windowWidth = document.documentElement.clientWidth;
- } else {
- windowWidth = self.innerWidth;
- }
- windowHeight = self.innerHeight;
- } else {
- if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
- windowWidth = document.documentElement.clientWidth;
- windowHeight = document.documentElement.clientHeight;
- } else {
- if (document.body) { // other Explorers
- windowWidth = document.body.clientWidth;
- windowHeight = document.body.clientHeight;
- }
- }
- }
- // for small pages with total height less then height of the viewport
- if (yScroll < windowHeight) {
- pageHeight = windowHeight;
- } else {
- pageHeight = yScroll;
- }
- // for small pages with total width less then width of the viewport
- if (xScroll < windowWidth) {
- pageWidth = xScroll;
- } else {
- pageWidth = windowWidth;
- }
- arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
- return arrayPageSize;
- }
- // 滚动条
- document.body.scrollTop;
- $(document).scrollTop();
js 和 jquery 获取页面和滚动条的高度 视口高度文档高度的更多相关文章
- jquery 获取页面和滚动条的高度
1.获取浏览器显示区域的高度 : $(window).height(); 2.获取浏览器显示区域的宽度 : $(window).width(); 3.获取页面的文档高度 : $(document).h ...
- js和jquery实现页面滚动监听
js和jquery实现页面滚动监听 一.总结 一句话总结:onscroll方法和监听页面元素的高度都可以实现滚动监听. 1.onscroll方法实现滚动监听的核心代码是什么? <body ons ...
- JavaScript、jQuery获取页面及个元素高度、宽度
Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.client ...
- js、jQuery 获取文档、窗口、元素的各种值
基于两年开发经验,总结了 javascript.jQuery 获取窗口.文档.元素的各种值 javascript: 文档:是整个document所有的内容 浏览器当前窗口文档body的宽度: docu ...
- jQuery获取页面及个元素高度、宽度
获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档 ...
- offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery 获取页面元素的属性值
获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 ...
- jQuery获取页面及个元素高度、宽度【转】
获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 ...
- 用JS或jQuery访问页面内的iframe,兼容IE/FF
用JS或jQuery访问页面内的iframe,兼容IE/FF js或者jQuery访问页面中的框架也就是iframe.注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.htm ...
随机推荐
- loj 1013(LCS+记忆化搜索)
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=25839 思路:第一小问可以很快求出了,两个字符串的长度-LCS,然 ...
- 《数据结构与算法分析》学习笔记(五)——队ADT
一.队的概念 队列也是一种表,但是是一种受限的表,只允许从一端插入,另一端山粗的表. 二.队列的数组实现 #define QMAXSIZE 100 typedef int Position; type ...
- android自定义弹出框样式实现
前言: 做项目时,感觉Android自带的弹出框样式比较丑,很多应用都是自己做的弹出框,这里也试着自己做了一个. 废话不说先上图片: 实现机制 1.先自定义一个弹出框的样式 2.自己实现CustomD ...
- 框架模式 MVC 在Android中的使用
算来学习Android开发已有2年的历史了,在这2年的学习当中,基本掌握了Android的基础知识.越到后面的学习越感觉困难,一来是自认为android没啥可学的了(自认为的,其实还有很多知识科学), ...
- [转]说说C语言运算符的“优先级”与“结合性”
补充自己的一点理解: 1.关于++i 与 i++的区别. ++i 和 i++如果是单独使用的语句,即二者后面均加上分号,或者其他单独使用的语句,没有任何区别.例如: for(i=0;i<100; ...
- C#将DataTable转换成list的方法
本文实例讲述了C#将DataTable转换成list及数据分页的方法.分享给大家供大家参考.具体如下: /// <summary> /// 酒店评论列表-分页 /// </su ...
- ember.js:使用笔记3 活用{{bind-attr}}
说明:属性值绑定(属性值有无引号都可以) 如果是非布尔值: 一般使用,绑定其值; 使用冒号时,绑定名称,如 :high -> high; 如果是布尔值: 如果值是true,绑定其名,这里要注意驼 ...
- 递推DP POJ 1163 The Triangle
题目传送门 题意:找一条从顶部到底部的一条路径,往左下或右下走,使得经过的数字和最大. 分析:递推的经典题目,自底向上递推.当状态保存在a[n][j]时可省去dp数组,空间可优化. 代码1: /*** ...
- HDU4859 海岸线(最小割)
题目大概就是说一个n*m的地图,地图上每一块是陆地或浅海域或深海域,可以填充若干个浅海域使其变为陆地,问能得到的最长的陆地海岸线是多少. 也是很有意思的一道题. 一开始想歪了,想着,不考虑海岸线重合的 ...
- POJ1523 SPF(割点模板)
题目求一个无向图的所有割点,并输出删除这些割点后形成几个连通分量.用Tarjan算法: 一遍DFS,构造出一颗深度优先生成树,在原无向图中边分成了两种:树边(生成树上的边)和反祖边(非生成树上的边). ...