js获取屏幕以及元素宽高的方法

一.window相关

网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth 

二.body相关

网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft

三.滚动相关

scrollHeight: 获取对象的滚动高度。
scrollWidth:  获取对象的滚动宽度 

document.documentElement.scrollTop 垂直方向滚动的值 

四.位置精确定位

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 

五.坐标轴

event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标

六.width/clientWidth/offsetWidth以及height之间区别

width是指可见内容的宽
height是指可见内容的高
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

原文地址:https://www.cnblogs.com/pythonywy/p/11631243.html

时间: 2024-10-08 18:12:22

js获取屏幕以及元素宽高的方法的相关文章

js 获取屏幕或元素宽高...

窗口相对于屏幕顶部距离 window.screenTop 窗口相对于屏幕左边距离 window.screenLeft, 屏幕分辨率的高 window.screen.height, 屏幕分辨率的宽 window.screen.width, 屏幕可用工作区高度 window.screen.availHeight, 屏幕可用工作区宽度 window.screen.availWidth 网页滚动距离顶部距离 document.body.scrollTop 网页滚动距离左边距离 document.body

js获取隐藏元素宽高的方法

网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>test</title> </head> <bo

谈谈jQuery和js里有关位置和宽高的方法

总结一下jQuery.原生js设置和获取位置.宽高的方法. 一.jQuery关于元素位置的方法 position() 方法:只能获取,不能设置. 可获取元素相对于其第一个position值不为static的祖先元素的偏移量,如果没有,则是相对于文档的偏移量:返回一个对象,包括两个属性:left,top; 属性值无单位,number类型.具体用法: $(element).position().left; //获取元素相对于其第一个position值不为static的祖先元素的偏移量 offset(

js 获取页面可视区域宽高

获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下. 1.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下 document.body.offsetWidth document.body.offsetHeight 2.在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小: document.documentElement.clientWidth document.documentElement.clientHeight 3.IE,FF,Saf

JS获取HTML DOM元素的几种方法

目前我只知道下面这几种获取DOM元素的方法 根据ID获取元素     getElementById 根据标签名获取元素     getElementsByTagName 根据className获取标签列表     getElementsByClassName 根据选择器获取到第一个找到的元素     document.querySelector 根据选择器获取到所有的元素     document.querySelectorAll 还有两个特殊的获取标签方式: 获取html的方法 documen

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

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

Javascript:获取浏览器窗口和屏幕的可用宽高

1.获取浏览器窗口的有效宽高(不包括工具栏和滚动条) 注:对于绝大部分浏览器使用window.innerWidth即可获取宽度,使用document.documentElement.clientWidth || document.body.clientWidth 为了实现对IE6,7的支持. 高度同上. var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var

jQuery中几个关于元素宽高方法的区别

几个关于元素宽高的方法 height():带参数设置,不带参数获取,参数是number类型 width():带参数设置,不带参数获取,参数是number类型 innerHeight() :内边距+内容的高度 innerWidth() :内边距+内容的宽度 outerHeight:上下内边距+内容+上下边框 outerWidth :左右内边距+内容+左右边框 案例测试: <!DOCTYPE html> <html lang="en"> <head> &

js获取屏幕元素宽高值

屏幕分辨率的宽高:window.screen.width  / window.screen.height 屏幕可用工作区宽高:window.screen.availWidth / window.screen.availHeight 网页可见区域宽高:document.body.clientWidth / document.body.clientHeight 网页可见区域宽高:document.body.offsetWidth / document.body.offsetHeight(包括边线)