JS获取网页宽高方法集合

JS获取网页宽高等方法的集合：
document.body.clientWidth - 网页可见区域宽
document.body.clientHeight - 网页可见区域高

document.body.offsetWidth - 网页可见区域宽，包括边线和滚动条的宽
document.body.offsetHeight - 网页可见区域高，包括边线和滚动条的高[FF,chrom下是整个页面高，IE opera 下正常]

document.body.scrollWidth - 网页总宽
document.body.scrollHeight - 网页总高

document.body.scrollTop - 有滚动条的时候，向下拖动滚动条，上方不显示的那部分高度
document.body.scrollLeft - 同上

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

window.screenTop - 网页正文部分上[网页文档的最上方距离屏幕最上方的距离，但FF不支持，Chrom,IE,Opera表现都不同，慎用]
window.screenLeft - 网页正文部分左[网页文档的最左方距离屏幕最左方的距离，但FF不支持，Chrom,IE,Opera表现都不同，慎用]

window.screen.height - 屏幕分辨率的高度
window.screen.width - 屏幕分辨率的宽度

window.screen.availHeight - 可用工作区高度[整个屏幕但不包括下方任务栏]
window.screen.availWidth - 可用工作区宽度[整个屏幕的宽度]

window.screen.clorDepth - 屏幕色彩，常用的16,32位等
window.screen.deviceXDPI - 屏幕像素/英寸【IE支持，其它不支持】

时间： 2024-09-13 22:17:18

JS获取网页宽高方法集合的相关文章

js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等（带图片说明）

网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;(点击查看大图) 网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);(点击查看大图)有没有发现,offsetWidth和clientWidth的区别,offsetWidt是连滚动条一起包含在内的. 网页正文全文宽: documen

js获取网页屏高 屏宽

<SCRIPT LANGUAGE="JavaScript"> <!-- //document.body.scrollTop 滚动条的上端距离 //document.body.scrollLeft 滚动条的左端距离 window.onload = function() { var s = ""; s += " 网页可见区域宽:"+ document.body.clientWidth; s += " 网页可见区域高:&qu

各种情况上JS获取元素宽高

各种情况下JS获取元素宽高 为了叙述简单,这里仅拿width示例. 情景一,元素style属性设置了width/height <div style="width:996px">test<div><script> var div = document.getElementsByTagName('div')[0]; alert(div.style.width);</script>默认分类 如上,使用el.style.width即可. 如果没有

js获取元素宽高

只说ie8+的浏览器的方法. 在转vue之前,一直使用jquery来获取元素的高度,最近转vue,发现了一个问题.使用vue的时候,部分操作需要在mounted这个生命周期里面去做,官网对mounted的解释是: 如果不在vm.$nextTick里面做操作的时候,是很有可能获取不到组件内部元素的宽高的.刚开始的时候,我没有仔细看官网,所以在mounted里面是直接获取不到子孙元素的宽高的. 后来,看了iview的一个组件的源码,看到了getComputedStyle方法获取宽高,对getComp

原生JS获取元素宽高实践详解

开篇的话 任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排查出是获取元素高度那里出了问题,这个问题记忆在书上或视频中看到过,许久没用,用的时候就想当然了.遂决定深入剖析用法,增加记忆,记录发表出来,也能给各位前端同行.求学者增加印象. 出错之处 秉承结构.样式.行为分离的宗旨,每次不管大小案例都是分开写html.css.js.这也算抛砖引出了我犯错的玉. 原css

js获取各种宽高

1.窗口和浏览器 window.innerWidth.window.innerHeight   浏览器内部可用宽高 window.outerWidth.window.outerHeight   浏览器整体宽高 window.screenTop(Firefox采用screenX)    浏览器左上角距离屏幕顶端的距离(IE.Opera.Chrome中如果紧贴屏幕顶部的话,则Top为浏览器工具栏的高度,而Firefox则为0)window.screenLeft((Firefox采用screenY)

javascript获取网页宽高，屏幕宽高，屏幕分辨率等

? <script> var s = ""; s += "\r\n网页可见区域宽:"+ document.body.clientWidth; s += "\r\n网页可见区域高:"+ document.body.clientHeight; s += "\r\n网页可见区域宽:"+ document.body.offsetWidth +" (包括边线和滚动条的宽)"; s += "\r\

js 获取图片宽高 和 图片大小

获取要查看大小的img varimg_url = 'http://img5.imgtn.bdimg.com/it/u=4267222417,1017407570&fm=200&gp=0.jpg'   // 创建img对象 var img = new Image();   // 改变图片的src img.src = img_url;   // 加载完成执行 img.onload = function(){   // 打印   alert('width:'+img.width+',height

【整理】原生js和jQ获取窗口宽高及滚动条的方法和函数

原生js和jQ获取窗口宽高及滚动条的方法和函数 一.原生js获取 1.实际宽高(不包括工具栏,滚动条的视口高度,ie6.7.8不支持) window.innerHeight window.innerWidth 2.显示屏宽高 screen.height screen.width 3..显示屏宽高(除windows任务栏之外的高度)屏幕可用工作区 screen.avaiHeight screen.availWidth 4.网页可见区域宽高 document.body.clientWidth doc