首页
学习
活动
专区
工具
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.6K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

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

    网页被卷去高:document.body.scrollTop 网页被卷去左:document.body.scrollLeft 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft...: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; //获取窗口高度

    8.1K30

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

    (包括边线宽)  网页可见区域高:document.body.offsetHeight (包括边线宽)  网页正文全文宽:document.body.scrollWidth  网页正文全文高...,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象滚动高度。 ...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离  scrollWidth:获取对象滚动宽度...  offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定父坐标的高度  offsetLeft:获取对象相对于版面或由 offsetParent 属性指定父坐标的计算左侧位置...(2)在随后JavaScript代码中,首先定义了两个变量winWidth和winHeight,用于保存窗口高度值和宽度值。

    16.2K10

    获取JS加载网页网页源码,不想获取JS加载后数据

    原来那篇文章竟然爆文了,突破了1.5w阅读量,欢迎大家围观。 不过这里粉丝需求有点奇怪,他不需要JS加载后数据页面,而是需要JS网页。昨天在群里又讨论起这个问题,这次一起来看看这个问题。...二、实现过程 这里【瑜亮老师】指出异步页面中,标签和数据都是不在页面源码中。你这个页面,数据在json,然后js拼装后显示在页面中。...,你就知道这个网页一开始是没有内容,全靠js在渲染。...先渲染再获取就有了,再者说,你目的肯定是只要这页面上表格,表格就是json,获取json链接比获取渲染后网页方便多了。...这篇文章主要盘点了一个Python网络爬虫网页JS渲染源网页源码获取问题,文中针对该问题,给出了具体解析和代码实现,帮助粉丝顺利解决了问题。

    11110

    获取JS加载网页网页源码,不想获取JS加载后数据

    原来那篇文章竟然爆文了,突破了1.5w阅读量,欢迎大家围观。 不过这里粉丝需求有点奇怪,他不需要JS加载后数据页面,而是需要JS网页。昨天在群里又讨论起这个问题,这次一起来看看这个问题。...二、实现过程 这里【瑜亮老师】指出异步页面中,标签和数据都是不在页面源码中。你这个页面,数据在json,然后js拼装后显示在页面中。...,你就知道这个网页一开始是没有内容,全靠js在渲染。...先渲染再获取就有了,再者说,你目的肯定是只要这页面上表格,表格就是json,获取json链接比获取渲染后网页方便多了。...这篇文章主要盘点了一个Python网络爬虫网页JS渲染源网页源码获取问题,文中针对该问题,给出了具体解析和代码实现,帮助粉丝顺利解决了问题。

    9910

    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; //将获取数据赋值给

    6.1K30

    JavaScript获取高度和宽度

    屏幕分辨率为:screen.width screen.height 屏幕可用大小:screen.availWidth screen.availHeight 网页可见区域宽:document.body.clientWidth...网页可见区域高:document.body.clientHeight 网页可见区域宽(包括边线宽):document.body.offsetWidth 网页可见区域高(包括边线宽):document.body.offsetHeight...网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去高:document.body.scrollTop...网页被卷去左:document.body.scrollLeft 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率高:window.screen.height...屏幕分辨率宽:window.screen.width 屏幕可用工作区高度:window.screen.availHeight 屏幕可用工作区宽度:window.screen.availWidth

    3.7K60

    JavaScript 获取屏幕高度和宽度

    screen.width:显示浏览器屏幕宽度 screen.Height:显示浏览器屏幕高度 screen.availWidth:显示浏览器屏幕可用宽度 screen.availHeight...:显示浏览器屏幕可用高度(这个可用高度不包括分配给半永久特性(如屏幕底部任务栏)垂直空间。)...document.body.offsetWidth:网页可见区域宽(包括边线宽) document.body.offsetHeight:网页可见区域高(包括边线高) ?...document.body.clientWidth:网页可见区域宽 document.body.clientHeight:网页可见区域高 document.body.scrollWidth:网页正文全文宽...document.body.scrollHeight:网页正文全文高 document.body.scrollTop:网页被卷去高  document.body.scrollLeft:网页被卷去

    7.2K20

    Javascript 获取div真实高度

    注意如果不是写在行内style中属性都不能通过id.style.atrr来获取。 现 在前端制作很少直接把样式写style里了,都是写在样式表里。...如果你要获取样式没有相对应(就像#div1.style.width对 应#div1.offsetWidth),就只能分别针对不用浏览器来获取样式表属性了,可以试着搜索“JS 获取样式属性”之类。...原文:http://www.cnblogs.com/zhwl/p/3858682.html 实际测试过程中,发现上面获取真实高度是有问题,其实无论是设置在样式表还是在行内设置,都会获取到你设置值,如果要获取真实高度...: alert(parseInt($('.article__content div').get(0).offsetHeight)); 获取时只要在这个样式里面的div大小,这个就是真实高度。...这里还附带其它获取高度方法 alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档高度

    5.1K30

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

    (包括边线高) 网页正文全文宽: document.body.scrollWidth 网页正文全文高: document.body.scrollHeight 网页被卷去高: document.body.scrollTop...网页被卷去左: document.body.scrollLeft 网页正文部分上: window.screenTop 网页正文部分左: window.screenLeft 屏幕分辨率高...window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象滚动高度...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离 scrollWidth:获取对象滚动宽度...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定父坐标的计算左侧位置

    10.4K60

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

    ==> 页面对象高度(即BODY对象高度加上Margin高) 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight...网页可见区域宽: document.body.offsetWidth (包括边线宽) 网页可见区域高: document.body.offsetHeight (包括边线高) 网页正文全文宽:...HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象滚动高度。...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离 scrollWidth:获取对象滚动宽度...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定父坐标的计算左侧位置

    7.7K80

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

    ==> 页面对象高度(即BODY对象高度加上Margin高) 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight...网页正文全文高: document.body.scrollHeight 网页被卷去高: document.body.scrollTop 网页被卷去左: document.body.scrollLeft...,clientWidth,offsetWidth scrollHeight: 获取对象滚动高度。...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离 scrollWidth:获取对象滚动宽度...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定父坐标的计算左侧位置

    5.6K10

    ClientHeight_offsetheight获取高度不对

    大家好,又见面了,我是你们朋友全栈君。 clientHeight:包括padding但不包括border、水平滚动条、margin元素高度。...style.height //返回元素高度(包括元素高度,不包括内边距、边框和外边距) clientHeight //返回元素高度(包括元素高度、内边距,不包括边框和外边距) offsetHeight...//返回元素高度(包括元素高度、内边距和边框,不包括外边距) scrollHeigh //返回元素高度(包括元素高度、内边距和溢出尺寸,不包括边框和外边距),无溢出情况,与clientHeight...相同 scrollTop //此属性可以获取或者设置对象最顶部到对象在当前窗口显示范围内顶边距离,也就是元素滚动条被向下拉动距离。...此属性是可读写。 offsetTop //返回元素上外缘距离最近采用定位父元素内壁距离,如果父元素中没有采用定位,则是获取上外边缘距离文档内壁距离。

    3.1K20
    领券