相信大家也经常会被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. Nginx是什么

    Nginx很强大,通常作为反向代理服务器,什么是反向代理服务器?就是客户端发送请求给Nginx ,Nginx收到请求后将请求转发给真正的服务器,然后接受服务器处理的结果,最后发送给客户端.客户端以为N ...

  2. Netty SimpleChannelInboundHandler和ChannelInboundHandler区别

    一般用netty来发送和接收数据都会继承SimpleChannelInboundHandler和ChannelInboundHandlerAdapter这两个抽象类,那么这两个到底有什么区别呢? 在客 ...

  3. Redis学习笔记01-分布式锁

    1.分布式锁的定义与理解 在并发任务中,当对数据执行修改和删除时为了防止多个任务同时拿到数据而产生的混乱,这时就要用到分布式锁来限制程序的并发执行. Redis分布式锁本质上要实现的目标就是在Redi ...

  4. python基础数据类型初始,用户交互

    一.基础数据类型初始 1.数字:int  1,2,3 print(100,type(100)) ',type('100')) 查看数据类型的方法:type()函数 取值范围: int(整型) 在32位 ...

  5. MFC 多屏显示

    概念 HMONITOR : 显示器句柄. 有效的显示器,该值不为空. 当WM_DISPLAYCHANGE 心消息发送的时候, 任何小时起都有可能被移除, 所以应用程序时刻检查全部的HMONITORS是 ...

  6. angular 基本树结构

    HTML: http://www.ngnice.com/showcase/#/tree/basic <link rel="stylesheet" href="vie ...

  7. 使用springboot上传文件至nginx代理服务器

    nginx配置图片服务器 server { listen 8001; server_name image.xxx.com; proxy_set_header X-Forwarded-Host $hos ...

  8. NFS和mount常用参数详解 本文目录

    NFS和mount常用参数详解   本文目录 NFS权限参数配置 mount挂载参数 原始驱动程序的挂载选项. 新驱动程序的挂载选项. 怎样改变已经挂载的NTFS卷的权限? 怎样自动挂载一个NTFS卷 ...

  9. SolrCloud4.7.1分布式部署

    一.环境 软件: apache-tomcat-7.0.53.tar.gz solr-4.7.1.tgz zookeeper-3.4.6.tar.gz   规划: 三个节点IP: 192.168.50. ...

  10. IDEA设置maven项目的默认配置

    IDEA设置maven项目的默认配置 问题描述 很多刚使用idea的人,用其创建maven工程时会遇到一个问题,明明给项目设置了新的maven配置(使用阿里镜像源或者自定义maven版本),但是重新打 ...