原文

  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. 【原创】大叔经验分享(76)confluence和jira配置

    一 下载 confluence https://product-downloads.atlassian.com/software/confluence/downloads/atlassian-conf ...

  2. php 测试php连接redis集群的案例

    <?php$redis_list = ['12.24.18.2:6379'];$client = new RedisCluster(NUll,$redis_list);echo $client- ...

  3. 使用css让表头固定的方法

    1.可以使用display: table; width: 100%; table-layout: fixed; table-layout: fixed;设置表格布局算法.tableLayout 属性用 ...

  4. Nginx如何配置基础缓存

    // /path/to/cache/:用于缓存的本地磁盘目录 // levels :在 /path/to/cache/ 设置了一个两级层次结构的目录. // 将大量的文件放置在单个目录中会导致文件访问 ...

  5. nhandled rejection Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs\node_cache npm ERR! cb() never called!

    安装全局包时报错,之前已经遇到过,结果第二次又忘记解决方法,果然还是要记下来,好记性不如烂笔头哇 $ npm i electron -gUnhandled rejection Error: EPERM ...

  6. IntelliJ IDEA安装及破解

    百度搜索IntelliJ IDEA,进入官网. 下载完成后进入安装界面 根据自己的情况选择安装路径 等待下载和安装完成. 安装完成 接下来我们运行IntelliJ IDEA 之后这里就要我们进行激活了 ...

  7. nginx 设置静态下载界面

    首先,官方设置链接:https://docs.nginx.com/nginx/admin-guide/web-server/serving-static-content/ 下面贴一个配置文件: cha ...

  8. input checkbod 全选 反选

      <script>             var CheckBox=div.getElementsByTagName('input');                         ...

  9. 使用pipenv管理你的python项目

    怎么使用pipenv管理你的python项目   原文链接:https://robots.thoughtbot.com/how-to-manage-your-python-projects-with- ...

  10. thymeleaf小知识

    1.根据不同性别,显明不同的默认图片:th:if th:src   图片路径 <img th:if="${gender=='男'}" id="admission_p ...