相信大家也经常会被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. 在 Node.js 中引入模块:你所需要知道的一切都在这里

    本文作者:Jacob Beltran 编译:胡子大哈 翻译原文:http://huziketang.com/blog/posts/detail?postId=58eaf471a58c240ae35bb ...

  2. VS2017装了西红柿插件之后,启动很多次才能启动成功,进程有很多devenv.exe但是就是无法启动成功

    VS2017装了西红柿插件之后,启动很多次才能启动成功,进程有很多devenv.exe但是就是无法启动成功,这个可能是西红柿插件visual assist的问题 启动vs命令行 输入: devenv ...

  3. C#墨攻IOC[转]

    原文叫看<墨攻>理解IOC概念 2006年多部贺岁大片以让人应接不暇的频率纷至沓来,其中张之亮的<墨攻>算是比较出彩的一部,讲述了战国时期墨家人革离帮助梁 国反抗赵国侵略的个人 ...

  4. Makefile知识点

    1.标准Makefile文件示例如下: #把.o .C .cxx .cpp .hxx .h添加到后缀列表中. .SUFFIXES: .o .C .cxx .cpp .hxx .h #设置变量并赋值,方 ...

  5. Opencv Mat矩阵操作注意事项

    矩阵操作通常不会进行元素复制,应注意: Mat a=Mat(100,100,CV_32S); Mat b=Mat(100,100,CV_32S); b=a.col(8);//此时并未进行元素赋值,而只 ...

  6. 机器学习之五 正则化的线性回归-岭回归与Lasso回归

    机器学习之五 正则化的线性回归-岭回归与Lasso回归 注:正则化是用来防止过拟合的方法.在最开始学习机器学习的课程时,只是觉得这个方法就像某种魔法一样非常神奇的改变了模型的参数.但是一直也无法对其基 ...

  7. Python之通配符--提取文件中的内容并输出

    前言:我的学习进度其实没有那么快的,因为现在是网络工程师实习,只有晚上一点时间和周末有空,所以周一到周天的学习进度很慢,今天之所以突然跳到通配符是因为工作需要,大体讲一下我的工作需求:网络工程师就是写 ...

  8. Linux上用户执行命令记录

    HFILE=`who -m | awk '{print $1}'`readonly HISTFILE=/var/history/$HFILE-$USER-$UID.logreadonly HISTFI ...

  9. PLSQLDeveloper链接报错 解决办法

    PLSQL Developer 9.06.1665中文破解版 亲们,win7 64位系统现在还没有PLSQLDeveloper可以使用,但是怎么办呢.好的,下面教大家怎么在64位系统下安装PLSQLD ...

  10. Dom4j官网解释实例

    Dom4j是一个易于使用的,开源的库,在Java平台上与XML,XPath,XSLT协同工作.使用Java集合框架,全面支持DOM,SAX,JAXP. 官方网站:http://dom4j.org 1. ...