JS获取DOM元素针对于浏览器的常用属性

原创 知乎其微 教程 JavaScript 58阅读 2018-08-16 15:45:59 举报

window对象常用的:

innerHeight(window.innerHeight)

window.innerHeight返回当前窗口的文档显示区的高度和宽度,以像素计。这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。
你可以直接理解为:返回整个浏览器可视区域高度(在h5网页中这个计算出的高度会根据你屏幕的适配方案不同而不同)

innerWidth(windwo.innerWidth)

window.innerWidth返回当前窗口的文档显示区的高度和宽度,以像素计。这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。
你可以直接理解为:返回整个浏览器窗口宽度(在h5网页中这个计算出的高度会根据你屏幕的适配方案不同而不同)

outerHeight(window.outerHeight)

window.outerHeight返回整个窗口的宽度。
你可以直接理解为:返回整个浏览器窗口实际像素的高度

outerWidth(window.outerWidth)

window.outerWidth返回整个窗口的宽度。
你可以直接理解为:返回整个浏览器窗口实际像素的宽度

screen对象常用的:

screen.height && screen.width

这两个属性返回显示屏幕的整个高度与宽度
你可以直接理解为:返回整个屏幕的分辨率的宽高

screen.availHeight && screen.availWidth

这两个属性返回显示屏幕的高度与宽度 (Windows的任务栏不在计算之内)。
你可以直接理解为:返回整个屏幕的分辨率的宽高,除开任务栏占去的高度

DOM Element对象

element.clientWidth && element.clientHeight

这两个属性返回元素的可视区域宽高度(不包含滚动以外及border部分)。
计算公式:
padding+width-scrollBar=clientWidth
padding+height-scrollBar=clientHeight
tips:如果获取的对象没有设置高度,则会返回元素内容的实际高度

上面代码没有给.client-height设置高度,最终返回的高度是内容的实际高度

element.offsetHeight && element.offsetWidth

这两个属性返回元素的宽高度(包含滚动条及border部分)。
计算公式:
border+padding+width+scrollBar=offsetWidth
border+padding+height+scrollBar=offsetHeight
tips:如果获取的对象没有设置高度,则会返回元素的实际高度(包含border,padding,content,scrollBar)

element.offsetTop && element.offsetLeft

返回元素距离窗口Y轴偏移和X轴偏移。

element.ScrollHeight && element.scrollWidth

返回元素整体高度和宽度。这个高度或宽度与滚动条无关,是内容的实际高度
计算公式:padding-top+padding-bottom+content-height(包含其子元素margin值)=scrollHeight
你可以直接理解为:返回获取scrollHeight元素顶端位置到底端位置的高度(包含滚动条隐藏的部分)

element.ScrollTop && element.scrollLeft

返回网页被卷去的高或者宽
你可以直接理解为:获取这个属性scrollTop元素的内容向上滚动了多少距离,也就是往上不可见内容的高度

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复