原文

  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. 原生 JS 绑定事件 移除事件

    监听事件的绑定与移除主要是addEventListener和removeEventListener的运用. addEventListener语法 element.addEventListener(ty ...

  2. SpringCloud多网卡配置(转)

    https://blog.csdn.net/lixiang987654321/article/details/88134324 docker部署过程中遇到如下问题: (1)docker容器创建之后,进 ...

  3. HTML 5浏览器端数据库

    HTML 5浏览器端数据库为什么要使用浏览器端数据库:随着浏览器处理能力的增强,越来越多的双喜鸟网站开始考虑在客户端存储大量的数据,这可以减少用户从服务器获取数据的等待时间. 1.本地存储-本地存储可 ...

  4. HTML的标签简单概括

    段落标签 <p></p> 属性  说明 值 align 对其方式 left(默认).right.center 水平线 <hr /> 属性  说明   值 width ...

  5. list列表的使用

    Python最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 list1 = [1,2,3,4,5,6,7,8,9] #创建列表 z = list([1,2,3,4,5,6,7,8 ...

  6. 《设计模式之美》 <02>评判代码质量好坏的维度

    如何评价代码质量的高低? 实际上,咱们平时嘴中常说的“好”和“烂”,是对代码质量的一种描述.“好”笼统地表示代码质量高,“烂”笼统地表示代码质量低.对于代码质量的描述,除了“好”“烂”这样比较简单粗暴 ...

  7. web开发:javascript动画

    一.鼠标事件 二.js盒模型 三.鼠标拖拽 四.键盘事件 五.其他时间应用 六.定时器 七.定时器案例 八.随机数 一.鼠标事件 <!DOCTYPE html> <html> ...

  8. 微信小程序开发(六)获取手机信息

    // succ.js var app = getApp() Page({ data: { mobileModel: '', // 手机型号 mobileePixelRatio: '', // 手机像素 ...

  9. 作业八——非确定的自动机NFA确定化为DFA

    NFA 确定化为 DFA 子集法: f(q,a)={q1,q2,…,qn},状态集的子集 将{q1,q2,…,qn}看做一个状态A,去记录NFA读入输入符号之后可能达到的所有状态的集合. 步骤: 1. ...

  10. 解决Python中出现的问题: “You are using pip version 9.0.1, however version 19.2.3 is available. You should consider upgrading via the 'python -m pip install --upgrade pip' command.”

    1. 一开始我在使用Pycharm时,导入numpy库,发现导入错误: Non-zero exit code (1) 2. 于是我通过更新的方法来解决,哪知道在更新的时候也出现了错误,错误如下图: 这 ...