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

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

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

获取body的宽高(不含边框)。
获取网页内body的宽度:document.body.clientWidth; //client不包括边框
获取网页内body的高度:document.body.clientHeight;

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

获取body的宽高(含边框)。
获取网页内body的宽度:document.body.offsetWidth //offset包括边框
获取网页内body的高度:document.body.offsetHeight

- 7
获取元素到顶部的距离。
获取元素到顶部的距离:document.getElementsByClassName("div")[0].offsetTop
获取元素到左边的距离:document.getElementsByClassName("div")[0].offsetLeft
js获取整个屏幕的尺寸的更多相关文章
- js获取浏览器屏幕的尺寸
浏览器屏幕尺寸参照表: 如何获取屏幕宽度: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: ...
- JS获取终端屏幕、浏览窗口的相关信息
查看终端屏幕相关信息,在windows系统的控制面板可以查到分辨率且可以设置,更具体的浏览器可视窗口等信息则需要借助其他工具.而在程序里需要动态获取时该怎么做呢? 琢磨的一个js方法,供大家参考.如下 ...
- js 获取 网页屏幕高度 窗口高度 元素高度 滚动高度
常用: JS 获取浏览器窗口大小 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 获取窗口宽度 if (window.innerWidth) winWidth = ...
- js获取图片的原始尺寸
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- js获取网页屏幕可视区域高度
document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.document ...
- JS获取浏览器可视区域尺寸
本文所说的是浏览器窗口的可视区域大小,不是浏览器窗口大小,也非页面尺寸. 在没有声明DOCTYPE的IE中,浏览器显示窗口大小只能以下获取: document.body.offsetWidth doc ...
- js获取网页屏幕可见区域高度
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...
- [js]获取网页屏幕可见区域高度
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...
- js获取手机屏幕宽度、高度
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
随机推荐
- 每日一句 Linux, 持续精进
每日一句 Linux, 持续更新 2019.12.10 1.远程登录 linux 服务器.首先要按照ssh(win10默认是安装了的).命令行窗口,使用 ssh 登录名@serverIp,之后输入密码 ...
- Python中,标识符用法
Python中,标识符 在Python中,所有标识符都可以包括英文.数字和下划线(),但不能包括数字.python中的标识符区分大小写.这是知识的背景.但通常,Python成为以下划线开头的标识符的习 ...
- bootstrap-selectpicker 插件事件
$('#id').on('show.bs.select', function (e) { //绑定下拉显示列表触发事件 }); $('#id').on('hidden.bs.select', func ...
- 根治android studio无法预览xml布局的问题
xml报错“Failed to load AppCompat ActionBar with unknown error.” 修改build-gradle文件中的appcompat包导入的版本,直接用“ ...
- Djang简介
一:MVC简介 MVC的全拼为Model-View-Controller,最早由TrygveReenskaug在1978年提出,是施乐帕罗奥多研究中心(Xerox PARC)在20世纪80年代为程序语 ...
- CDQ 分治解决和点对有关的问题
具体可以去这篇博客学习: https://oi-wiki.org/misc/cdq-divide/
- oppo面经-java开发
Oppo一面(1)自我简介(2)介绍一个自己做过的最得意的项目,项目的细节,难点,怎么解决的,还存在的问题,有什么优化的想法吗(这个我说了很长时间,面试官说非计算机专业的,有这种实习经验确实能加分)( ...
- BZOJ 4823 老C的方块
把格子分成四类 第一类是蓝线左右的相邻两个格子 第二类为与蓝线左边格子相邻的点 第三类为与蓝线右边格子相邻的点 建边就S朝第二类每个点建边 第二类每个点朝其相邻的第一类建边 第一类从左格子朝右格子建边 ...
- HTML5——2 HTML5视频
在以往我们还是使用flash来进行播放视频,但是它有先天的缺陷,比如,很多的浏览器并不会直接去支持flash插件,需要你自己去安装,而且版本也很难去统一,也有浏览器先天集成了这个插件,比如Chrome ...
- 创建yum本地仓库,将阿里仓库同步到本地,并定时更新
很多时候为了加速自己内部的rpm包安装速度,都会搭建自己的yum源仓库,而使用系统光盘自带的源,由于软件版本比较落后,所以不太适用,而大家都在用的阿里仓库比较好用,所以就想到了把阿里仓库的rpm全部拉 ...