jquery获取文档高度和窗口高度的例子

jquery获取文档高度和窗口高度,$(document).height()、$(window).height()

$(document).height():整个网页的文档高度

$(window).height():浏览器可视窗口的高度

$(window).scrollTop():浏览器可视窗口顶端距离网页顶端的高度(垂直偏移)

$(document.body).height();//浏览器当前窗口文档body的高度

$(document.body).outerHeight(true);//浏览器当前窗口文档body的总高度 包括border padding margin

$(window).width(); //浏览器当前窗口可视区域宽度

$(document).width();//浏览器当前窗口文档对象宽度

$(document.body).width();//浏览器当前窗口文档body的高度

$(document.body).outerWidth(true);//浏览器当前窗口文档body的总宽度 包括border padding margin

用一句话理解就是:当网页滚动条拉到最低端时,$(document).height() == $(window).height() + $(window).scrollTop()。

当网页高度不足浏览器窗口时$(document).height()返回的是$(window).height()。

不建议使用$("html").height()、$("body").height()这样的高度。

原因:

$("body").height():body可能会有边框,获取的高度会比$(document).height()小;

$("html").height():在不同的浏览器上获取的高度的意义会有差异,说白了就是浏览器不兼容。

$(window).height()值有问题,返回的不是浏览器窗口的高度?

原因:网页没有加上<!DOCTYPE>声明。

懒人建站整理js获取页面高度和窗口高度

实际应用:设置内容区域合适的高度

 代码如下复制代码

//设置内容区域合适高度
    var docH = $(document).height(),
        winH = $(window).height(),
        headerH = $(".header").outerHeight();
        footerH = $(".footer").outerHeight();
    if(docH<=winH+4){
        $("div.container").height(winH-headerH-footerH-50);
    }

注:winH+4 因为IE8下只有4像素偏差

 代码如下复制代码

// 获取页面的高度、宽度

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;//www.111cn.net

    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获取浏览器窗口的可视区域高度和宽度,滚动条高度
  • 获取浏览器窗口高度宽度大小js/jquery代码

转载于:https://www.cnblogs.com/alibai/p/3552177.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/294214.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

nginx源码学习Unix - Unix域协议

说到什么是域协议就会出现这么个解释&#xff1a; UNIX域协议并不是一个实际的协议族&#xff0c;而是在单个主机上执行客户/服务器通信的一种方法&#xff0c;所用API与在不同主机上执行客户/服务器通信所使用的API相同。UNIX域协议可以视为IPC方法之一。 我们白话解释下Unix域…

oracle12c考试内容,12c ocp考试内容

oca1z0-047(Oracle Database SQL Expert 1Z0-047) 60个题&#xff0c;90分钟&#xff0c;66%过关。/1z0-051(Oracle Database 11g: SQL Fundamentals I 1Z0-051) 64个题&#xff0c;120分钟&#xff0c;60%过关。/1z0-061(Oracle Database 12c: SQL Fundamentals 1Z0-061) 75个…

微软开源的Web测试和自动化神器 Playwright

Playwright 是微软开源的一个用于 Web 测试和自动化的框架, 提供了可靠的端到端测试, 功能非常强大, 可以在测试, 爬虫&#xff0c;自动化场景中使用。跨浏览器Playwright 支持所有现代的渲染引擎&#xff0c;包括 Chromium、WebKit 和 Firefox。跨平台在 Windows, Linux 和 ma…

史上最厉害的“1+2”!这个270年前出现的大难题,已经60多年没有出现好消息了..........

全世界只有3.14 % 的人关注了爆炸吧知识费马费马欧拉欧拉数学是科学的皇后数论是数学中的皇冠这顶皇冠每一次被举起它的光芒都在照亮数学的前方从112到“12”人类一次次逼近“哥德巴赫猜想”的真相从一张白纸到上面写满n>2的证明“费马大定理”凝聚成了一部数学史从2、3、5、…

C++复习五

C++类的成员变量和成员函数 类是一种数据类型,它类似于普通的数据类型,但是又有别于普通的数据类型。类这种数据类型是一个包含成员变量和成员函数的一个集合。 类的成员变量和普通变量一样,也有数据类型和名称,占用固定长度的内存空间。但是,在定义类的时候不能对成员变…

PowerCenter基础心得

心得学习 [转自&#xff23;&#xff33;&#xff24;&#xff2e;&#xff1a;http://blog.csdn.net/hualin_xie/article/details/4885800] 通过将近一周的学习时间&#xff0c;我大致掌握了PowerCenter 的基本架构和设计开发过程中的一些方法和技巧。PowcerCenter 也是属于典…

Git删除不存在对应远程分支的本地分支

远程分支已经删除&#xff0c;对应的本地分支还存在 # git remote show origin * remote origin Fetch URL: gitgithub.com:xxx/xxx.git Push URL: gitgithub.com:xxx/xxx.git HEAD branch: master Remote branches: master trackedrefs/remotes/origin/b1 stale (use git remo…

Java输入输出流和文件操作

操作系统中的文件和目录概念 文件与文件系统 文件是信息的一种组织形式&#xff0c;是存储在外部存储介质上的具有标志名的一组相关信息集合。 文件系统用文件概念来组织和管理存放在各种介质上的信息。文件系统提供目录机制实现文件的“按名存取”。 目录结构与文件检索 目录是…

C++复习(七)

C++构造函数 当创建一个对象时,往往需要做一些初始化工作,例如对数据成员赋值等。为了解决这个问题,C++提供了构造函数。 构造函数(Constructor)是一种特殊的成员函数,它的名字和类名相同,没有返回值,不需要用户调用(用户也不能调用),而是在创建对象时自动执行。构造…

放寒假的硕博研究生将经历什么?

全世界只有3.14 % 的人关注了爆炸吧知识1月中下旬基本全国的高校都放假了&#xff0c;除了部分因为疫情滞留在学校和外地的学生&#xff0c;绝大多数的学生都会回家过年。平时自带学霸光环&#xff0c;可以借口工作学业繁忙&#xff0c;不回家&#xff0c;不用应酬&#xff0c;…

怎么在php登录首页添加样式,首页登录后怎么在首页显示用户名以及隐藏登录框?...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼index.php&#xff1a;登录页面用户名&#xff1a;密码&#xff1a;没有账号&#xff1f;立即注册——————————————————————————doaction.php&#xff1a;header("Content-type:text/html;charsetutf…

.NET 6新特性试用 | HTTP日志记录middleware

前言在以前&#xff0c;通常需要我们自己编写middleware记录HTTP请求和响应。而在.NET 6中默认就有已经实现好的middleware&#xff0c;添加了对HTTP日志记录的支持。Demo要想启用HTTP日志记录middleware十分简单&#xff1a;app.UseHttpLogging();运行程序&#xff0c;发现没有…

C++复习8

C++ this指针详解 this 是C++中的一个关键字,也是一个常量指针,指向当前对象(具体说是当前对象的首地址)。通过 this,可以访问当前对象的成员变量和成员函数。 所谓当前对象,就是正在使用的对象,例如对于stu.say();,stu 就是当前对象,系统正在访问 stu 的成员函数 say…

自动化测试有感

1、 研究自动化测试也有一段时间了&#xff0c;从不熟悉到慢慢的了解&#xff0c;从不会到会&#xff0c;从迷茫到清晰...... 前段时间一直都很疑惑&#xff0c;为什么要自动化&#xff0c;自动化能给我们带来哪些好处&#xff1f;它存在的价值在哪里&#xff1f;运行一个脚本…

iOS 集合的深复制与浅复制

2019独角兽企业重金招聘Python工程师标准>>> 概念 对象拷贝有两种方式&#xff1a;浅复制和深复制。顾名思义&#xff0c;浅复制&#xff0c;并不拷贝对象本身&#xff0c;仅仅是拷贝指向对象的指针&#xff1b;深复制是直接拷贝整个对象内存到另一块内存中。 一图以…

linux实时进程优先级rt,Linux实时性- PREEMPT_RT实时抢占实现

作者&#xff1a;Paul E. McKenney翻译整理&#xff1a;土豆丝624原文链接&#xff1a;概述&#xff1a;本篇文章主要讲Linux的实时包PREEMPT_RT 是如何实现的。PREEMPT_RT 的原理PREEMPT_RT包的关键点是要使非抢占式的内核代码量尽可能的少&#xff0c;同时为了提供抢占性而必…

Adb安装程序出现TimeOut错误

为什么80%的码农都做不了架构师&#xff1f;>>> 安装Apk过程中&#xff0c;出现如下错误&#xff1a; Failed to install on device ‘XXX′: timeout 原因时设备速度太卡&#xff0c;导致启动超时&#xff0c;解决办法&#xff1a;延长超时时间。 方法&#xff…

2021.NET大会日程首发!行程亮点全曝光!

{倒计时4天文末有福利→.NET机器人定制抱枕}2021年12月18日由中国各地技术社区共同发起举办、知名企业和开源组织联合协办的2021年中国.NET开发者大会即将盛大开幕▽2020/12/18-12/19主题&#xff1a;开源共建|开放创新|开发赋能形式&#xff1a;线上直播- 长按二维码免费领票 …

C++9

C++类和new、delete操作符 在C++中,你可以像定义变量一样来创建对象,如: Student stu; //对象已被实例化,已分配内存空间,可以使用了 stu.say(); //调用成员函数 这种情况下,系统会在栈区为对象分配内存。栈区是内存中的一块区域,由系统自动分配和释放,程序员无法操控…