首页
学习
活动
专区
工具
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 | 通过类名获取标签

    HTML5学堂(码匠):在原生JavaScript当中,存在默认getElementsByClassName()方法,在不支持该方法浏览器中,又应该怎么实现“通过类名获取标签”呢?...原生JS通过类名获取标签 getElementsByClassName()是原生JavaScript提供方法,但是并不是所有的浏览器都支持,在ie早期版本浏览器是不允许通过这个方法获取标签,因此...通过类名获取标签思路 首先检测浏览器是否支持getElementsByClassName方法; 对于不支持getElementsByClassName方法浏览器,通过标签方式来获取标签,之后,进行标签筛选...涉及到相关知识 · 字符串split方法; · 数组push方法; · 工厂模式。 JS功能代码 1....功能优化 – 缩小选取范围 在此前代码当中,存在着一个问题:如果通过通配符获取标签,那么所获取标签数量过于庞大,需要筛选大量标签,会耗费比较多时间,此时可以借助第二个参数进行控制,允许用户传入一个参数

    13.1K60

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

    :window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象滚动高度...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离 scrollWidth:获取对象滚动宽度...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定父坐标的计算左侧位置...Window对象innerWidth属性包含当前窗口内部宽度。Window对象innerHeight属性包含当前窗口内部高度。 Document对象body属性对应HTML文档标签。...else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度

    8.1K30

    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 获取div真实高度

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

    5.1K30

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

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

    16.2K10

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

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

    10.4K60

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

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

    7.7K80

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

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

    5.6K10

    ClientHeight_offsetheight获取高度不对

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

    3.1K20
    领券