js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)

时间:2021-12-21 11:37:10

网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
(点击查看大图)
js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)

网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);
(点击查看大图)
js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)
有没有发现,offsetWidth和clientWidth的区别,offsetWidt是连滚动条一起包含在内的。

网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
(点击查看大图)
js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)
无论DTD是否声明,在HTML中,document.body.scrollHeight和document.body.scrollWidth 都表示浏览器所有内容高度。
这里有一个要注意的地方,兼容性的写法 document.documentElement.scrollHeight 在DTD声明中的不同表现
具体可以参考
http://www.cnblogs.com/blackwood/archive/2013/03/12/2955472.html

网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;

(点击查看大图)
js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)
DTD是否声明,影响scrollTop的值,请参考
http://www.kixi.com.cn/blog/?p=2811

浏览器的位置上: window.screenTop;
浏览器的位置左: window.screenLeft;

(点击查看大图)
js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)
在IE和FF的浏览器中,分别要使用screenTop和screenY,screenLeft和screenX
具体请参考:
浏览器窗口位置Window screenLeft、screenTop属性

屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;

(点击查看大图)
js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)
window.screen.availHeight和window.screen.availWidth表示屏幕的高/宽(除开屏幕底的状态条)像素
window.screen.heght和window.screen.width表示屏幕的全高和全宽(包含底部的工具栏)
可以查看在线实例,自己仔细体会下!
js调用screen的相关属性

pageX鼠标点所在位置的X轴全像素位移(包含滚动的部分)
pageY鼠标点所在位置的Y轴全像素位移(包含滚动的部分)

(点击查看大图)
js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)
在线测试##http://jsfiddle.net/kixi/3HEJe/

offsetX鼠标所在位置对应的元素的左上角(0,0)与鼠标点的X轴的像素距离,IE、chrome下有效
offsetY鼠标所在位置对应的元素的左上角(0,0)与鼠标点的Y轴的像素距离,IE、chrome下有效
(点击查看大图)
js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)
在线例子  http://jsfiddle.net/kixi/5EL6m/ 

转自清晰网

js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)的更多相关文章

  1. js获取浏览器和设备相关width(屏幕的宽度)

    首先呢,我们将iPhone手机的相关数据表示如下 我们要理解很多东西,比如逻辑分辨率.物理分辨率.缩放因子.ppi等,这里先不讨论. 首先呢,我们先介绍下各个屏幕宽度: 网页可见区域宽: docume ...

  2. JS 获取浏览器和屏幕宽高等信息代码

    JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:doc ...

  3. js获取浏览器高度

    常用: JS 获取浏览器窗口大小 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 获取窗口宽度 if (window.innerWidth) winWidth = ...

  4. JS 获取浏览器窗口大小

    JS 获取浏览器窗口大小 <script> // 获取窗口宽度 if (windows.innerWidth) { winWidth = windows.innerWidth; } els ...

  5. js获取浏览器高度和宽度值&comma;尽量的考虑了多浏览器。

    js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...

  6. js获取浏览器基本信息:document&period;body&period;clientWidth&sol;clientHeight&sol;scrollWidth&sol;scrollTop。(转)

    js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop. 分类: js.jquery.ext.js技术2011 ...

  7. JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth

    常用: JS 获取浏览器窗口大小   // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((docume ...

  8. 【转】js 获取浏览器高度和宽度值&lpar;多浏览器

    原文地址:http://www.jb51.net/article/19844.htm js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ...

  9. js获取浏览器窗口大小

    摘抄:https://blog.csdn.net/qq_27628085/article/details/81947478 常用: JS 获取浏览器窗口大小       // 获取窗口宽度   if ...

  10. JS获取浏览器高度 并赋值给类

    在给网站做轮播焦点图的时候,如果需要全屏的话,可以用下面的jQuery来获取浏览器高度,然后赋值给类. $(window).load(function () { var maxHeight = 0; ...

随机推荐

  1. hdu 敌兵布阵(线段树之单点更新)

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  2. PoshyTip jQuery 文本提示插件的使用

    PoshyTip 是JQuery中一款文本提示插件,在Jsp页面使用相当方便,插件内包含了很多外观样式,可以作为FormTooltips使用. 插件包下载地址:http://vadikom.com/f ...

  3. 关于点击空白关闭弹窗的js写法推荐?

    $(document).mouseup(function(e){ var _con = $(' 目标区域 '); // 设置目标区域 ){ // Mark 1 some code... // 功能代码 ...

  4. python命令行解析工具argparse模块【5】

            上一节我们学习了parse_args()的用法,这一节,我们将继续学习argparse的其他一些用法.         1.sub-commands子命令         argpar ...

  5. 小强的HTML5移动开发之路(14)——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  6. 启动期间的内存管理之bootmem&lowbar;init初始化内存管理–Linux内存管理&lpar;十二&rpar;

    1. 启动过程中的内存初始化 首先我们来看看start_kernel是如何初始化系统的, start_kerne定义在init/main.c?v=4.7, line 479 其代码很复杂, 我们只截取 ...

  7. xxx污水厂监控网络定点图

  8. 视图控制器生命周期中各个重要的方法&lpar;Swift&rpar; &lpar;Important Methods during the Lifecycle of a View Controller&rpar;

    1. init(coder:) 它是视图控制器从故事板创建实例的默认初始化函数.(It is the initializer for UIViewController instances create ...

  9. 【NLP】Stanford

    http://web.stanford.edu/class/cs224n/syllabus.html https://www.youtube.com/watch?v=OQQ-W_63UgQ&l ...

  10. Linux基础之-Bash命令优先级

    一. Bash简介 命令解释器,也就是 Bourne Again Shell,起源于shell.shell俗称壳,它是指UNIX系统下的一个命令解析器:主要用于用户和系统的交互.UNIX系统上有很多种 ...