原文

  1. 首先获取屏幕宽度:window.screen.width;    //整个屏幕的宽度。

  2. 然后获取屏幕高度:window.screen.height;     //整个屏幕的高度。

  3. 获取可用工作区尺寸。

    获取屏幕可用工作区域宽度:window.screen.availWidth;     //pc端与上面两个一致,移动端除个别其他也一致(试一下即可)

    获取屏幕可用工作区域高度:window.screen.availHeight;

  4. 获取body的宽高(不含边框)。

    获取网页内body的宽度:document.body.clientWidth;     //client不包括边框

    获取网页内body的高度:document.body.clientHeight;

  5. 获取网页的宽高。

    获取整个网页的宽度:document.body.scrollWidth

    获取整个网页的高度:document.body.scrollHeight

  6. 获取body的宽高(含边框)。

    获取网页内body的宽度:document.body.offsetWidth     //offset包括边框

    获取网页内body的高度:document.body.offsetHeight

  7. 7

    获取元素到顶部的距离。

    获取元素到顶部的距离:document.getElementsByClassName("div")[0].offsetTop

    获取元素到左边的距离:document.getElementsByClassName("div")[0].offsetLeft

js获取整个屏幕的尺寸的更多相关文章

  1. js获取浏览器屏幕的尺寸

    浏览器屏幕尺寸参照表: 如何获取屏幕宽度: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: ...

  2. JS获取终端屏幕、浏览窗口的相关信息

    查看终端屏幕相关信息,在windows系统的控制面板可以查到分辨率且可以设置,更具体的浏览器可视窗口等信息则需要借助其他工具.而在程序里需要动态获取时该怎么做呢? 琢磨的一个js方法,供大家参考.如下 ...

  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获取图片的原始尺寸

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  5. js获取网页屏幕可视区域高度

    document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.document ...

  6. JS获取浏览器可视区域尺寸

    本文所说的是浏览器窗口的可视区域大小,不是浏览器窗口大小,也非页面尺寸. 在没有声明DOCTYPE的IE中,浏览器显示窗口大小只能以下获取: document.body.offsetWidth doc ...

  7. js获取网页屏幕可见区域高度

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  8. [js]获取网页屏幕可见区域高度

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  9. js获取手机屏幕宽度、高度

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

随机推荐

  1. C++性能榨汁机之伪共享

    C++性能榨汁机之伪共享 来源  http://irootlee.com/juicer_false_sharing/ 前言 在多核并发编程中,如果将互斥锁的争用比作“性能杀手”的话,那么伪共享则相当于 ...

  2. [转载]Pytorch详解NLLLoss和CrossEntropyLoss

    [转载]Pytorch详解NLLLoss和CrossEntropyLoss 来源:https://blog.csdn.net/qq_22210253/article/details/85229988 ...

  3. 【转】js原型链与继承

    原文链接:https://blog.csdn.net/u012468376/article/details/53127929 一.继承的概念 ​ 继承是所有的面向对象的语言最重要的特征之一.大部分的o ...

  4. 复选框已经有checked,但是页面没有选中效果(解决)

    原代码: $("#checked").click(function(){ $(".input[name="checked"]").attr( ...

  5. 使用openSSL构造一个支持https的nodejs服务器

    首先通过下面的链接下载openSSL https://slproweb.com/products/Win32OpenSSL.html 下载完毕后,执行openssl进入交互式界面: 使用命令生成pri ...

  6. Java中接口是否可以继承多个接口?

    可以. 接口是常量值和方法定义的集合.接口是一种特殊的抽象类. java类是单继承的.classB Extends classA java接口可以多继承.Interface3 Extends Inte ...

  7. css div嵌套层中button的margin-top不起作用解决方法

    首先声明本人资质尚浅,本文只用于个人总结.如有错误,欢迎指正.共同提高. --------------------------------------------------------------- ...

  8. PAT Basic 1065 单身狗 (25 分)

    “单身狗”是中文对于单身人士的一种爱称.本题请你从上万人的大型派对中找出落单的客人,以便给予特殊关爱. 输入格式: 输入第一行给出一个正整数 N(≤ 50 000),是已知夫妻/伴侣的对数:随后 N ...

  9. Swagger保姆级教学

    Swagger保姆级教学 Swagger 简介 Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样 ...

  10. Python&Selenium自动化测试之PO设计模式

    一.摘要 Page Object模式,后面简称PO,他是一种设计思想,在上一章节中,曾经列举了一些在编写自动化测试过程中随着代码量的增加导致的大量代码难以维护.难以扩展.可读性极差等灾难性的事件:那么 ...