相信大家也经常会被js的获取大小搞得头昏脑胀,到底应该用哪种方式获取才是我要的那种大小呢

好啦,在此我帮大家整理好我知道的那些。

window.screen.availHeight

   获取的是当前电脑的屏幕大小

   注意:这个大小是屏幕大小,不是浏览器窗口的大小

window.innerHeight

  获取的是当前浏览器的可用视口的大小

  想要整张页面刚好和占满的话就用这个吧

  注意:当谷歌浏览器全屏会有1px的误差(比实际全屏略大);火狐不存在

document.body.clientHeight:

  获取的是当前body的高度

  感觉和body的offsetHeight一样大

document.body.offsetHeight :

   当前的网页所占的撑起的body的大小,如果设置浮动可能这个值为0哦。

document.getElementById("box").style.height

   css中的height,废话就不多说了

window.getComputedStyle(document.getElementById("box"))["height"]

   当前计算后实际的高度,这个用在万一css的height为百分比或者rem,em该怎么办呢

document.element.offsetTop 和 window.pageYOffset  

  获取元素的高度和窗口的当前位置这个是相对于整个浏览器的,一般可以用来做滚动效果

js的各种获取大小的更多相关文章

  1. JS设置和获取盒模型的宽和高

    JS设置和获取盒模型的宽和高 dom.style.width/height:只能取出内联样式的宽度和高度 dom.currentStyle.width/height:获取即时的计算的样式,但是只有IE ...

  2. js设置、获取单值cookie和多值cookie

    js设置.获取单值cookie和多值cookie,代码如下: var CookieUtil = (function () { var Cookie = function () { // 获取单值coo ...

  3. js之如何获取css样式

    js之如何获取css样式   一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px; border ...

  4. offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

    js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...

  6. js简单日期获取( 菜鸟入门基础)

    关于js日期的获取要用到最基本的Date()方法获取当日的日期 var d =new Date();  //定义日期对象 var y=d.getFullYear();   //获取年 var m=d. ...

  7. js与jquery获取父元素,删除子元素的不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...

  8. 小议 js 下字符串比较大小

    原文:小议 js 下字符串比较大小 之前群里有人问如何比较两个时间大小,他的时间格式是 2014-08-08 而不是 2014-8-8.所以我给的方法是 直接比较,如: var a = "2 ...

  9. 2.Node.js access_token的获取、存储及更新

    文章目录:         1.Node.js 接入微信公众平台开发         2.Node.js access_token的获取.存储及更新 一.写在前面的话   上一篇文章中,我们使用 No ...

随机推荐

  1. STL 最大堆与最小堆

    在第一场CCCC选拔赛上,有一关于系统调度的水题.利用优先队列很容易AC. // 由于比赛时花费了不少时间研究如何定义priority_queue的比较函数,决心把STL熟练掌握... Queue 首 ...

  2. Linux CentOS CapsLock 大小写反转问题 解决

    虚拟机centos7,输入大小写字母反了,开启capslock的时候变成小写字母了,关闭则变成大写了... 只需要执行 setleds +caps 或 setleds -caps 即可,如图:

  3. Java学习之一(引用相关)

    1.Java概述 首先,Java是一门面向对象的编程语言.相对于C/C++等语言,Java中没有指针,但是这不代表指针等知识不重要:Java中不存在多继承但是存在多接口.在我自己的学习过程之中,我偏向 ...

  4. <每日一题>题目21:简单的python练习题(21-30)

    #21.cookie和session的区别 ''' 1.cookie数据存放在客户的浏览器上,session数据存放在服务器上 2.cookie不是很安全,可以通过分析本地cookie组成伪造cook ...

  5. CAS企业级单点登录原理

    https://blog.csdn.net/anumbrella/article/details/80821486 1. 单点登录概述 1.1. 什么是单点登录? 单点登录:Single Sign O ...

  6. Selenium浏览器自动化测试使用(2)

    Selenium - 环境安装设置 为了开发Selenium RC或webdriver脚本,用户必须确保他们有初始配置完成.有很多关联建立环境的步骤.这里将通过详细的讲解. 下载并安装Java 下载并 ...

  7. Android 开发 AudioRecord音频录制

    前言 Android SDK 提供了两套音频采集的API,分别是:MediaRecorder 和 AudioRecord,前者是一个更加上层一点的API,它可以直接把手机麦克风录入的音频数据进行编码压 ...

  8. 已发布的jsp项目如何在本地展示

    已发布的项目可以放到tomcat 安装目录下的webapps/下面,但是有时候我们的目录已经放好了,所在要加映射过去. 1, 到tomcat/conf/下,打开server.xml 2, 找到 < ...

  9. UVA - 1230

    https://vjudge.net/problem/UVA-1230 费马小定理优化快速幂 #include <iostream> #include <cstdio> #in ...

  10. create-react-app 创建项目失败

    创建失败后查阅相关资料,亲测删除 C:\Users\Administrator\AppData\Roaming\npm-cache\ 该文件夹下所有内容后成功.