Js获取宽高度的归纳总结
首先,先吓唬一下我们的小白们!在js中的描述宽高的可以细分有22种。
- window.innerWidth //除去菜单栏的窗口宽度
- window.innerHeight//除去菜单栏的窗口高度
- window.outerWidth//包括菜单栏的窗口宽度
- window.outerHeight//包括菜单栏的窗口宽度
- window.screen.height//电脑屏幕的高度
- window.screen.width//电脑屏幕的宽度
- window.screen.availHeight//电脑屏幕的可利用高度
- window.screen.availWidth//电脑屏幕的可利用宽度
- window.screenTop//浏览器距离屏幕的高度
- window.screenLeft//浏览器距离屏幕的宽度
- document.body.clientWidth//指元素的自身宽度(包括padding)
- document.body.clientHeight//指元素的自身的高度(包括padding)
- document.body.clientLeft//子级div内容位置到父级内容区域的宽度距离(即border值)
- document.body.clientTop//子级div内容位置到父级内容区域的高度距离(即border值)
- document.body.offsetWidth//指定元素的宽度(包括padding,border和内容)
- document.body.offsetHeight//指定元素的高度(包括padding,border和内容)
- document.body.offsetTop//距离父级元素的高度
- document.body.offsetLeft//距离父级元素的宽度
- document.body.scrollWidth//获取的是文档的宽度(当指定的宽度小于浏览器窗口的时候,为浏览器的宽度)
- document.body.scrollHeight//获取的是文档的高度(当指定的高度小于浏览器窗口的时候,为浏览器的高度)
- document.body.scrollTop//文档被滚动上去的时候(即滚动条往上滚动的距离)
- document.body.scrollLeft//文档被滚动右去的时候(即滚动条往右滚动的距离)
看起来有点怕怕,但我们细分可以很清晰的分清楚他们
- width和height的都是值元素或窗口等的宽高,top和left表示的是到相对元素的距离
- client,offset,scrollh和screen都分别有width,height,top和left
- 最后就是区别窗口和屏幕的宽高和元素的宽高
我们先从上往下去分析每一个的作用
innerHeight/Width
outerHeight/Width
Screen屏幕宽高
首先我们先分清楚widnow和document的区别window 整个窗口document 除了顶头的菜单栏document对象是window对象的一部分 话不多说,直接上图
offset
document.body.offsetWidth
document.body.offsetHeight
指定元素的border+padding+内容的宽度和高度
如果没有padding和border
offsetWidth = clientWidth
兼容性问题
IE6/7中(微软已经不提供支持)
offsetLeft = (offsetParent的padding-left)+(当前元素的margin-left)
IE8以上
offsetLeft = (offsetParent的margin-left)+(当前元素的margin-left)
火狐中
offsetLeft = (offsetParent的margin-left)+(当前元素的margin-left)+(offsetParent的padding-left)
client
指定元素的宽度和高度 即内容+padding
如果没有滚动条,即元素本身设定的宽度
如果出现滚动条,滚动条会遮盖元素宽高,那么,该属性就是其本来宽高减去滚动条的宽度
console.log( document.body.clientHeight);
console.log(document.body.clientWidth);
读取元素border的宽度和高度(子级内容区域到父级内容区域的距离)
document.body.clientLeft
document.body.clientTop
scroll
谷歌浏览器下
- 当指定的宽高小于浏览器窗口的时候
- scrollWidth为浏览器的宽度
- scrollHeight为浏览器的高度
- 当给的宽高大于浏览器窗口,且内容小于给定的宽高时
- scrollWidth给定的宽度+padding、margin和border
- scrollHeight给定的宽度+padding、margin和border
- 当给定的宽高大于浏览器窗口,且内容大于给定的宽高
- scrollWidth内容宽度+所有的padding,margin和border
- scrollHeight内容高度+所有的padding,margin和border
属性时可读写的
指当元素其中的内容超出其宽高的时候,元素被卷起的高度和宽度
懒加载思路
在还没有这个技术的出现时,页面的所有内容和图片,都会在访问时一次性的加载出来,对于浏览器和服务器都是一种负担,如果想百度图片这样的图库,用手机来看,多少流量都是浪费。这样的用户体验不仅差,还给服务器增加负担。所以懒加载技术才酝酿出来。
懒加载技术的要点是通过滚动事件触发判断
元素到顶部的距离小于 <= 可视区域 client(满足条件后触发加载后台内容)
底部加载技术
scrollTop+可视区域 == 网页高度 scrollHeight(满足条件后触发加载后台内容)
一天多写一点点,一天多积累一点点!
(完!)
转载于:https://www.cnblogs.com/itdansan/p/8116273.html
Js获取宽高度的归纳总结相关推荐
- 编辑器js获取浏览器高度和宽度值(转)
js获取浏览器高度和宽度值 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: docume ...
- 原生js获取元素高度
原生js获取元素高度 <div id='container'></div> let dom = document.getElementById('contanier')dom. ...
- JS获取div高度的方法
有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight ...
- 在html上js添加宽度,js 获取div高度并重新设置div高度与宽度
js 获取div高度并重新设置div高度与宽度 js 获取div高度并重新设置div高度与宽度 var $=function(id) { return document.getElementById( ...
- JS获取浏览器高度 并赋值给类
JS获取浏览器宽高的兼容写法: var w = window.innerWidth || document.documentElement.clientWidth || document.body.c ...
- 原生js获取宽高与jquery获取宽高的方法的关系
说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况. 2.以下所说的所有方法与属性所返回的值都是不带单位的. 3.为了方便说明,以下情况采用缩写表示: obj -> ...
- js获取页面高度获取视口高度获取内容高度获取滚动条宽度高度
element对象的宽高属性 1. DOM树 2.document对象 3.element对象 4. 获取元素高度宽度 1. DOM树 浏览器根据DOM模型,将结构化文档HTML解析成节点,DOM的最 ...
- js 获取浏览器高度和宽度值
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
- 不同浏览器JS获取浏览器高度和宽度
摘自:http://blog.csdn.net/lai_gb/archive/2009/07/04/4320956.aspx IE中: document.body.clientWidth ==> ...
最新文章
- SaltStack 学习笔记 - 第四篇: SaltStack常用模块
- alert(1) to win 16
- c#索引器介绍|C#索引器写法|c#索引器例子
- 石板切割问题c语言_岩知识 | 岩板切板有讲究,工艺问题要注意
- 在VC资源文件中加入声音资源
- ruby 在 windows 中 新建进程 打开其他程序
- MapReduce过程卡在reduce处的67%
- cas 怎么过滤带pathvariable_屋顶花池怎么做
- 疫情之下,你有多久没回过家了?
- 【android】环境变量的设置
- matlab利用窗改变幅值_Matlab在车辆中的应用 信号处理分析
- 遇到暴风影音 activeX 漏洞
- 4k电视色彩表现测试软件,选高端4K电视 4K测试图帮你轻松分辨
- 【FFmpeg命令】jpg与yuv(批量)互转
- mysql连接服务器教程_连接 MySQL 服务器
- ka电器表示什么意思_电路中FU、KM、KA、KT、KV、SA、FR和SB分别是什么电器元件的文字符号?...
- linux和主机共享文件,设置Linux虚拟机与主机共享文件的方法
- 为什么配置智能DNS解析的时候一定要有默认线路?
- 毕业后5年,我终于变成了月薪13000的软件测试工程师
- python终端会话是指什么_进程组、会话、控制终端的概念及程序