原文

  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. 关于SpringMVC映射模型视图的几点小事

    一.SpringMVC概述 SpringMVC为展现层提供的基于MVC设计理念的优秀的Web框架,是目前最主流的MVC框架之一. SpringMVC通过一套MVC注解,让POJO成为处理请求的控制器, ...

  2. 基于create-react-app脚手架,按需加载antd组件以及less样式

    摘要 为了更好的书写css样式,在react中引入less,在网上查询了许多关于react引入less样式文件的资料,大多数都是需要在react项目中npm run eject暴露出底层文件,然后在底 ...

  3. Web框架概述——React.js

    目前,在前端Web开发中,三大热门框架为React.js,Vue.js,Angular.js .当然,三大框架各有各的优缺点,这里就不多说了,下面我就针对前段时间所学的React框架做一下整体知识点的 ...

  4. 11.SpringMVC注解式开发-处理器方法的返回值

    处理器方法的返回值 使用@Controller 注解的处理器的处理器方法,其返回值常用的有四种类型 1.ModelAndView 2.String 3.void 4.自定义类型对象 1.返回Model ...

  5. Browser Security-超文本标记语言(HTML)

    Browser Security-超文本标记语言(HTML) 瞌睡龙 · 2013/06/19 18:55 重要的4个规则: 1 &符号不应该出现在HTML的大部分节点中. 2 尖括号< ...

  6. 【python】导入自定义模块

    一.直接import 1.当执行文件与要导入的py文件在同一目录下时 假设要在wangyi.py中导入weibo.py文件 import weibo 2.当执行文件与要导入的py文件所在文件夹在同一目 ...

  7. vue-element-admin 之改变登录界面input的光标颜色

    前话:用框架原有的login更改而不重写的话,恰好当你input背景设置成白色的时候,光标会找不到=>原因:原框架的光标颜色是#fff 操作更改光标颜色: 找到src/views/login/i ...

  8. 目标检测后处理之NMS(非极大值抑制算法)

    1.定义: 非极大值抑制算法NMS广泛应用于目标检测算法,其目的是为了消除多余的候选框,找到最佳的物体检测位置. 2.原理: 使用深度学习模型检测出的目标都有多个框,如下图,针对每一个被检测目标,为了 ...

  9. 关于从入 OI 以来学的各种知识点的系统总结

    前言 OI 之路差不多快结束了,最近水平也萎得很厉害,这里就开个目录,记录一些需要总结的知识点吧.不定期更,勿催,我还要改模拟赛的题. 目录

  10. java与JSON

    XML 格式数据极其的冗长.因为每个离散的数据片段需要大量的 XML 结构,所有有效 的数据的比例非常低.XML 语法还有轻微的模糊.还有,解析 XML 是非常占程序员的精力的.你需要提前了解详细的结 ...