首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js获取各种高度总结

在写js时候偶尔需要获取各种高度,比如;浏览器高度,页面高度,滚动高度等。抽空整理了我自己常用到,时间仓促,没有考虑到万恶IE浏览器。。。。...获取屏幕高度和宽度(屏幕分辨率): window.screen.height window.screen.width 获取屏幕工作区域高度和宽度(去掉状态栏): window.screen.availHeight...window.screen.availWidth 网页全文高度和宽度: document.body.scrollHeight document.body.scrollWidth 滚动条卷上去高度和向右卷宽度...: document.body.scrollTop document.body.scrollLeft 网页可见区域高度和宽度(不加边线): document.body.clientHeight document.body.clientWidth...网页可见区域高度和宽度(加边线): document.body.offsetHeight document.body.offsetWidth

12.5K20
您找到你想要的搜索结果了吗?
是的
没有找到

JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

:window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象滚动高度...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离 scrollWidth:获取对象滚动宽度...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定父坐标的计算左侧位置...else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度...(2)在随后JavaScript代码中,首先定义了两个变量winWidth和winHeight,用于保存窗口高度值和宽度值。

8K30

vue.js数据渲染完成后,获取页面高度问题

遇到问题 通过接口请求出来数据,渲染到页面上,再获取元素内容高度时候,高度为0 为什么高度会是0 因为我是在接口返回数据后,就直接在回调函数里获取了元素内容高度。...虽然数据获取到了,但是页面还没有及时渲染出来,所以获取内容高度就为0了 然后我就延迟2秒获取内容高度,发现内容高度是渲染完成后正常高度,但是这样肯定是不行。...部分代码示例一: mounted() { this.getDataList(); //调用方法 }, methods: { //获取数据列表 getDataList() {...1&keywords=') .then(function (res) { that.dataList = res.data.data; //将获取数据赋值给...=1&keywords=') .then(function (res) { that.dataList = res.data.data; //将获取数据赋值给

5.9K30

JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度(转)

window.screen.availWidth  HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象滚动高度...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离  scrollWidth:获取对象滚动宽度...  offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定父坐标的高度  offsetLeft:获取对象相对于版面或由 offsetParent 属性指定父坐标的计算左侧位置...window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度...(2)在随后JavaScript代码中,首先定义了两个变量winWidth和winHeight,用于保存窗口高度值和宽度值。

16.1K10

js 获取浏览器高度和宽度值(多浏览器)

window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象滚动高度...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离 scrollWidth:获取对象滚动宽度...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定父坐标的计算左侧位置...offsetTop:获取对象相对于版面或由 offsetTop 属性指定父坐标的计算顶端位置 event.clientX 相对文档水平座标 event.clientY 相对文档垂直座标...--显示浏览器窗口实际尺寸--> 浏览器窗口 实际高度: 浏览器窗口 实际宽度

10.3K60

js 获取浏览器高度和宽度值(多浏览器)

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象滚动高度。...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离 scrollWidth:获取对象滚动宽度...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定父坐标的计算左侧位置...offsetTop:获取对象相对于版面或由 offsetTop 属性指定父坐标的计算顶端位置 event.clientX 相对文档水平座标 event.clientY 相对文档垂直座标...--显示浏览器窗口实际尺寸--> 浏览器窗口 实际高度: 浏览器窗口 实际宽度

7.5K80

js 获取浏览器高度和宽度值(多浏览器)

,clientWidth,offsetWidth scrollHeight: 获取对象滚动高度。...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离 scrollWidth:获取对象滚动宽度...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定父坐标的计算左侧位置...offsetTop:获取对象相对于版面或由 offsetTop 属性指定父坐标的计算顶端位置 event.clientX 相对文档水平座标 event.clientY 相对文档垂直座标 event.offsetX...--显示浏览器窗口实际尺寸--> 浏览器窗口 实际高度: 浏览器窗口 实际宽度

5.6K10

html背景图片设置宽高_网页背景图片怎么设置

大家好,又见面了,我是你们朋友全栈君。 1.背景图片插入方法 行内样式插入背景图: 在css样式表中引入背景图 注意:设置背景图片元素一定要有具体宽度和高度,否则会导致背景图片无法显示 2.背景图相关属性设置 2.1 background-size...属性 background-size:设置背景图大小,它属性值有:cover、contain和具体宽度和高度值 (1)cover:浏览器将使图像足够大,使它完全覆盖了盒子区,同时仍然保持其高宽比。...规定了指定背景图片background-image 属性原点位置背景相对区域。...它属性取值有:border-box、padding-box、content-box (1)border-box:背景图片摆放以border区域为参考 div{ width

4.9K10

JavaScript、Jquery获取屏幕宽度和高度

在日常项目中经常需要获取屏幕宽度或者高度,简单记录一下: Javascript方法获取: document.body.clientWidth //网页可见区域宽 document.body.clientHeight... //网页被卷去左 window.screenTop //网页正文部分上 window.screenLeft //网页正文部分左 window.screen.height //屏幕分辨率高 window.screen.width... //屏幕分辨率宽 window.screen.availHeight //屏幕可用工作区高度 window.screen.availWidth //屏幕可用工作区宽度 JQuery方法获取: ($(...window).height()); //浏览器当前窗口可视区域高度 ($(document).height()); //浏览器当前窗口文档高度 ($(document.body).height())...;//浏览器当前窗口文档body高度 ($(document.body).outerHeight(true));//浏览器当前窗口文档body高度 包括border padding margin

5.2K00

win10 uwp 获取窗口坐标和宽度高度 获取可视范围获取当前窗口坐标和宽度高度获取最前窗口范围

本文告诉大家几个方法在 UWP 获取窗口坐标和宽度高度 获取可视范围 获取窗口可视大小 Windows.UI.ViewManagement.ApplicationView.GetForCurrentView...().VisibleBounds 获取当前窗口坐标和宽度高度 Window.Current.Bounds 获取最前窗口范围 通过 Win32 Api 获取最前窗口范围 IntPtr hWID...E5%8F%A3%E7%9A%84%E5%9D%90%E6%A0%87%E5%92%8C%E5%AE%BD%E5%BA%A6%E9%AB%98%E5%BA%A6.html ,以避免陈旧错误知识误导...,同时有更好阅读体验。...欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接: https://lindexi.gitee.io ),不得用于商业目的,基于本文修改后作品务必以相同许可发布。

3.7K30

如何在onCreate中获取View高度和宽度

如何在onCreate中获取View高度和宽度 在开发过程中经常需要获取到View宽和高,可以通过View.getWidth()和View.getHeight()来得到宽高。...然而新手们经常在onCreate方法中直接调用上面两个方法得到值是0! 这是为什么呢? 因为View绘制是通过两个遍历来完成,一个measure过程,一个layout过程。...而这一切是发生在onCreate方法之后。所以在onCreate中直接使用View.getWidth()和View.getHeight()是无法得到正确。...那应该怎么onCreate中获取View宽高呢?...开发者可以通过View.post()方法来获取到View宽高,该方法传递一个Runnable参数,然后将其添加到消息队列中,最后在UI线程中执行。

5.3K20

item高度不同时Recyclerview获取滑动距离方法

是基于item平均高度算得,如果列表中item高度一致可以用此方法。问题来了,我应用场景是各item高度不一,这时就只能另找方法了。...方法一: 网上找方法,用一个变量去统计,每次滑动时候累加y轴偏移量。item插入\移动\删除时候,需要手动去更新totalDy,不然就会一直错下去。...所以考虑重写LinearLayoutManagercomputeVerticalScrollOffset()方法,既然原生方法是按平均高度计算,那重写该计算逻辑,就能达到我们想要效果。...1.统计列表已展示过item高度,在每次布局完成时候,用一个map记录positon位置item对应view高度。...,通过heightMap循环累加0到positonitem高度,再加上第一个可见item不可见部分高度

2.8K10

JS - 可自动伸缩高度文本框

因为文本框宽高固定死了, 还是超出出现了滚动条。 怎么让文本框初始化设置一定高度,但是文字超出时自动跟随内容高度伸缩?...答: 初始化高度通过css设置(如上),自动伸缩高度值通过js来计算(如下)。 如果js计算的话,就需要事件触发,用change事件? 答:但是change事件体验不好。 为什么?...答:就是计算文本框滚动高度,即内容高度 具体怎么做? 答:键盘每次弹起时候,获取文本框内容高度添加给文本框高度,即可让其实时跟随内容自适应。 内容高度用什么属性计算?...即:scrollHeight:给定对象滚动高度,即内容可视高度。...不用,可以在计算高度时候获取多个,并循环计算: function textareaH(){ let obj = $('textareaClass'), len = obj.length

9.2K20
领券