js的各种获取大小
相信大家也经常会被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的各种获取大小的更多相关文章
- JS设置和获取盒模型的宽和高
JS设置和获取盒模型的宽和高 dom.style.width/height:只能取出内联样式的宽度和高度 dom.currentStyle.width/height:获取即时的计算的样式,但是只有IE ...
- js设置、获取单值cookie和多值cookie
js设置.获取单值cookie和多值cookie,代码如下: var CookieUtil = (function () { var Cookie = function () { // 获取单值coo ...
- js之如何获取css样式
js之如何获取css样式 一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px; border ...
- offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js 和 jquery 获取页面和滚动条的高度 视口高度文档高度
js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...
- js简单日期获取( 菜鸟入门基础)
关于js日期的获取要用到最基本的Date()方法获取当日的日期 var d =new Date(); //定义日期对象 var y=d.getFullYear(); //获取年 var m=d. ...
- js与jquery获取父元素,删除子元素的不同方法
var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...
- 小议 js 下字符串比较大小
原文:小议 js 下字符串比较大小 之前群里有人问如何比较两个时间大小,他的时间格式是 2014-08-08 而不是 2014-8-8.所以我给的方法是 直接比较,如: var a = "2 ...
- 2.Node.js access_token的获取、存储及更新
文章目录: 1.Node.js 接入微信公众平台开发 2.Node.js access_token的获取.存储及更新 一.写在前面的话 上一篇文章中,我们使用 No ...
随机推荐
- js去除空格或所有空格
function trim(str) { return str.replace(/(^\s*)|(\s*$)/g, ""); } /***is_global 设置"g&q ...
- filters和scope在ElasticSearch Faceting模块的应用
filters和scope在ElasticSearch Faceting模块的应用 使用ElasticSearch的Facet功能时,有一些关键点需要记住.首先,faceting的结果只会基于查询结果 ...
- NOIP2016提高A组 B题 【HDU3072】【JZOJ4686】通讯
题目描述 “这一切都是命运石之门的选择.” 试图研制时间机器的机关SERN截获了中二科学家伦太郎发往过去的一条短 信,并由此得知了伦太郎制作出了电话微波炉(仮). 为了掌握时间机器的技术,SERN总部 ...
- 19-10-24-J-快乐?
向未来的大家发送祝福(不接受的请自动忽略): 祝大家程序员节快乐! 好了. ZJ一下 额. 考场上差点死了. 码1h后,T1还没过大样例. 我×××. 后来发现是自己××了. T2T3丢暴力. 比咕的 ...
- camtasia Studio 7 的使用
最近领导给了个任务,要把我们的三维应用功能做个视频,好带出去宣传.通过搜索,发现大家都说camtasia Studio好用,很快在网上找到了,与大家分享链接: http://pan.baidu.com ...
- PHP7中标量类型declare的用法详解
这篇文章主要介绍了PHP7标量类型declare用法,结合实例形式分析了PHP7中标量类型declare的功能.特性与相关使用技巧,需要的朋友可以参考下 本文实例讲述了PHP7标量类型declare用 ...
- springboot核心技术(五)-----消息(rabbitmq)
消息 1. 大多应用中,可通过消息服务中间件来提升系统异步通信.扩展解耦能力 2. 消息服务中两个重要概念: 消息代理(message broker)和目的地(destination) 当消息发送者发 ...
- dubbo入门学习(三)-----dubbo整合springboot
springboot节省了大量的精力去配置各种bean,因此通过一个简单的demo来整合springboot与dubbo 一.创建boot-user-service-provider 本篇博文基于上篇 ...
- 官方 NSIS 插件全集简单介绍
Math plugin (contain examples) -- 数学函数插件,NSIS 软件已包含,这个不用说了吧,计算的时候必用. System plugin (contain examples ...
- 挑逗 Java 程序员的那些 Scala 绝技
有个问题一直困扰着 Scala 社区,为什么一些 Java 开发者将 Scala 捧到了天上,认为它是来自上帝之吻的完美语言:而另外一些 Java 开发者却对它望而却步,认为它过于复杂而难以理解.同样 ...