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 ...
随机推荐
- 【原创】大叔经验分享(76)confluence和jira配置
一 下载 confluence https://product-downloads.atlassian.com/software/confluence/downloads/atlassian-conf ...
- php 测试php连接redis集群的案例
<?php$redis_list = ['12.24.18.2:6379'];$client = new RedisCluster(NUll,$redis_list);echo $client- ...
- 使用css让表头固定的方法
1.可以使用display: table; width: 100%; table-layout: fixed; table-layout: fixed;设置表格布局算法.tableLayout 属性用 ...
- Nginx如何配置基础缓存
// /path/to/cache/:用于缓存的本地磁盘目录 // levels :在 /path/to/cache/ 设置了一个两级层次结构的目录. // 将大量的文件放置在单个目录中会导致文件访问 ...
- 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 ...
- IntelliJ IDEA安装及破解
百度搜索IntelliJ IDEA,进入官网. 下载完成后进入安装界面 根据自己的情况选择安装路径 等待下载和安装完成. 安装完成 接下来我们运行IntelliJ IDEA 之后这里就要我们进行激活了 ...
- nginx 设置静态下载界面
首先,官方设置链接:https://docs.nginx.com/nginx/admin-guide/web-server/serving-static-content/ 下面贴一个配置文件: cha ...
- input checkbod 全选 反选
<script> var CheckBox=div.getElementsByTagName('input'); ...
- 使用pipenv管理你的python项目
怎么使用pipenv管理你的python项目 原文链接:https://robots.thoughtbot.com/how-to-manage-your-python-projects-with- ...
- thymeleaf小知识
1.根据不同性别,显明不同的默认图片:th:if th:src 图片路径 <img th:if="${gender=='男'}" id="admission_p ...