js和jQuery 获取屏幕高度、宽度

js获取屏幕高度,宽带

网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
 

jQuery 获取屏幕高度、宽度

做手机Web开发做浏览器兼容用到了,所以在网上找了些汇总下。

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();

转载于:https://www.cnblogs.com/fan-fan/p/3428859.html

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

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

相关文章

tomcat java php_为什么要用tomcat?

首先&#xff0c;tomcat是开源的&#xff0c;基于java语言开发的&#xff0c;部署web项目的容器。普通的html&#xff0c;浏览器可以直接搞定&#xff0c;可以不需要tomcat等部署&#xff0c;但是如servlet这些&#xff0c;浏览器没法直接将里面的内容解析出来吧。这些就需要一…

安装配置树莓派的最佳工具——NOOBS

本文由 极客范 - 开了光的喜羊羊 翻译自 Jason Fitzpatrick。欢迎加入极客翻译小组&#xff0c;同我们一道翻译与分享。转载请参见文章末尾处的要求。如果你想找一种最简单的方式启动你的树莓派&#xff0c;不用再左顾右盼啦&#xff01;树莓派基金会开发的 New Out Of Box Sof…

Fiddler的钩子hook导致电脑无法连上网络

今天&#xff0c;电脑怎么都无法连上网络&#xff0c;重启了几次电脑也不行&#xff0c;网络环境是没有问题的&#xff0c;后来同事告诉我&#xff0c;Fiddler有一个BUG&#xff0c;就是Fiddler获取钩子之后没有释放掉&#xff0c;必须启动Fiddler&#xff0c;再关闭Fiddler&am…

java 方法参数绑定_java在注解中绑定方法参数的解决方案

我们有这样子的需求&#xff0c;需要记录用户操作某个方法的信息并记录到日志里面&#xff0c;例如&#xff0c;用户在保存和更新任务的时候&#xff0c;我们需要记录下用户的ip&#xff0c;具体是保存还是更新&#xff0c;调用的是哪个方法&#xff0c;保存和更新的任务名称以…

玩转树莓派Raspberry Pi 篇一:入门篇

前言&#xff1a;之前发了一篇树莓派刷OpenWrt系统的晒单&#xff0c;得到众多网友的关注&#xff0c;小编要希望分享更多DIY树莓派的经验。我玩树莓派都是比较简单的DIY&#xff0c;也积累了一点经验&#xff0c;在此分享给大家&#xff0c;算是抛砖引玉&#xff0c;希望看到大…

服务器三大类

SMP、NUMA、MPP体系结构介绍从系统架构来看&#xff0c;目前的商用服务器大体可以分为三类&#xff0c;即对称多处理器结构 (SMP &#xff1a; Symmetric Multi-Processor) &#xff0c;非一致存储访问结构 (NUMA &#xff1a; Non-Uniform Memory Access) &#xff0c;以及海量…

java listeners_Java ActionListeners

我将用Java开发一个游戏,它将拥有许多听众(动作,键,鼠标等).我的问题是实现监听器的最佳方式.方法1&#xff1a;this.addActionListener(new ActionListener() {// Overide methods go here});方法2&#xff1a;创建一个新类(或多个类),它将实现ActionListener并具有不同Game C…

WINCE6补丁安装

补丁安装 1. SP1 2. R2 3. R3 4. 最新一年的12月31月补丁 补丁下载地址 https://msdn.microsoft.com/en-us/windowsembedded/dn205267

codeforces B. The Fibonacci Segment 解题报告

题目链接&#xff1a;http://codeforces.com/problemset/problem/365/B 题目意思&#xff1a;简单来说&#xff0c;就是要找出最长的斐波纳契长度。 解决的方法不难&#xff0c;但是要注意更新左区间和右区间的值&#xff0c;而且需要把当前求出的斐波纳契长度和之前求出的斐…

mysql 导致iis 假死_php使用MySql函数导致Apache(iis)崩溃的问题解决方案

这个问题是在Windows下配置PHP环境时发生的。具体的表现是php运行正常&#xff0c;但是只要一调用MySql的相关函数&#xff0c;Apache就会崩溃掉。环境配置方式&#xff1a;php以模块的方式运行在Apache下。自定义php.ini路径phpinfo()显示mysql库加载成功崩溃后在Windows的错误…

回环设备(loop-back devices)

回环设备&#xff08; loopback device&#xff09;允许用户以一个普通磁盘文件虚拟一个块设备。设想一个磁盘设备&#xff0c;对它的所有读写操作都将被重定向到读写一个名为 disk-image 的普通文件而非操作实际磁盘或分区的轨道和扇区。&#xff08;当然&#xff0c;disk-ima…

委托类型

委托时一种特殊的类型&#xff0c;它用来保存方法的地址&#xff0c;这样我们很方便的调用方法&#xff0c;像变量一样传递&#xff0c;回调。 C中的函数指针也是保存方法的地址&#xff0c;但是有一点不一样的是定义委托的时候就知道了它里面可以保存什么样的方法&#xff0c;…

python 管道 异步读取 select_python之异步select解析

一、I/O多路复用I/O的含义&#xff1a;在计算机领域常说的IO包括磁盘IO和网络IO&#xff0c;我们所说的IO复用主要是指网络IO&#xff1b;在Linux中一切皆文件&#xff0c;因此网络IO也经常用文件描述符FD来表示。复用的含义&#xff1a;在通信领域中为了充分利用网络连接的物理…

C语言 文件

1. 需要了解的概念 需要理解的知识点包括&#xff1a;数据流、缓冲区、文件类型、文件存取方式 1.1 数据流&#xff1a; 指程序与数据的交互是以流的形式进行的。进行C语言文件的存取时&#xff0c;都会先进行“打开文件”操作&#xff0c;这个操作就是在打开数据流&#xff0…

WINCE BSP中source文件中的宏定义

在WinCE BSP中会看到很多sources文件&#xff0c;一般会和源代码放在同一个目录&#xff0c;当然不是绝对的。这些sources文件里面就是定义了一些宏&#xff0c;主要用于告诉Build.exe在编译源代码的时候应该如何编译和链接&#xff0c;告诉Nmake.exe如何编译源代码以及最后生成…

java递增_java-8 – 如何按组递增

有一个表,现在添加一个新列 – sort_num int default 0id level sort_num1 1 02 1 03 2 04 2 05 2 06 3 07 3 08 3 09 3 0现在我想设置如下的sort_num值id level sort_num1 1 12 1 23 2 14 2 25 2 36 3 17 3 28 3 39 3 4上面的Java代码实现要求是int sortNum 0;int currentLev…

解决WCF接口无法传递object参数的问题

在某些场合中&#xff0c;我们需要提供以object为参数的方法。不过在WCF中&#xff0c;由于需要序列化与反序列化&#xff0c;因此它要求所有WCF传递的参数类型都是已知的&#xff0c;无法传递object这种未知类型。即使用了KnownType来标记自定义对象&#xff0c;也无法调用。以…

wince中的BSP工程的相关文件介绍

一.pbcxml分析 每一个BSP都有一个工程文件&#xff0c;比如MyBSP.pbcxml&#xff0c;里面描述了BSP的信息。下面就来介绍一下BSP的pbcxml文件。 文件的大致格式应该是这样的&#xff1a; <CatalogFile …> <FileInformation ….> …. </FileInformation>…

calcite连接mysql_使用Calcite做Sql语法解析

Flink SQL中使用Calcite作为sql语法解析、校验、优化工具&#xff0c;本篇是实操篇&#xff0c;介绍一下calcite做sql语法解析使用方式。sql经过calcite解析之后&#xff0c;得到一棵抽象语法树&#xff0c;也就是我们说的AST&#xff0c;这棵语法树是由不同的节点组成&#xf…

ASP.NET Web Froms开发模式中实现程序集的延迟加载

延迟加载是一个很大的诱惑&#xff0c;可以达到一些比较好的效果&#xff0c;比如&#xff1a; 1、在实体框架中&#xff0c;由于关联数据的数量和使用时机是不确定的&#xff0c;通过延迟加载&#xff0c;仅在使用的时候去执行关联数据的查询操作&#xff0c;减少无谓的数据查…