javascript - 所有的视图属性和方法(offsetHeight、clientHeight、scrollHeight、innerHeight等)

栏目: IT技术 · 发布时间: 4年前

内容简介:注意:本文只简单的介绍了各个视图的属性和方法。如果想要知道兼容性或者更多,请至文章底部参考链接处。本文内容分为五大部分::star:

注意:本文只简单的介绍了各个视图的属性和方法。如果想要知道兼容性或者更多,请至文章底部参考链接处。

本文内容分为五大部分:

  • Window视图属性
    • innerHeight 和 innerWidth
    • outerHeight 和 outerWidth
    • pageXOffset 和 pageYOffset
    • screenX 和 screenY
  • Screen视图属性
    • availWidth 和a vailHeight
    • colorDepth
    • pixelDepth
    • width 和 height
  • 文档视图(DocumentView)和元素视图(ElementView)方法
    • document.elementFromPoint()
    • element.getBoundingClientRect():star:滑动栏滚动的时候常用
    • document.getClientRects()
    • element.scrollIntoView()
  • 元素视图属性
    • clientHeight 和 clientWidth
    • clientLeft 和 clientTop
    • offsetWidth 和 offsetHeight
    • offsetLeft 和 offsetTop
    • offsetParent
    • scrollHeight 和 scrollWidth
    • scrollLeft 和 scrollTop
    • scrollLeftMax 和 scrollTopMa
  • 鼠标位置
    • clientX 和 clientY
    • offsetX 和 offsetY
    • pageX 和 pageY
    • screenX 和 screenY
    • x 和 y

一、Window视图属性

:star: innerHeight 属性和 innerWidth 属性:获取window浏览器内部大小,也就是视口(viewport)大小

:star: outerHeight 属性和 outerWidth 属性:表示整个浏览器窗体的大小

pageXOffset 属性和 pageYOffset 属性:表示整个页面滚动的像素值(水平方向的和垂直方向的)

screenX 属性和 screenY 属性:浏览器窗口在显示器中的位置,screenX表示水平位置,screenY表示垂直位置

如下图所示,红色部分为览器窗口,绿色部分为浏览器的视口(viewport)

javascript - 所有的视图属性和方法(offsetHeight、clientHeight、scrollHeight、innerHeight等)

二、Screen视图属性

availWidthavailHeight :显示器可用宽高,不包括任务栏之类的东西

colorDepth :显示器的颜色深度

pixelDepth :该属性基本上与colorDepth一样

widthheight :表示显示器屏幕的宽高。

三、文档视图(DocumentView)和元素视图(ElementView)方法

document.elementFromPoint() :返回给定坐标处所在的元素。

:star: element.getBoundingClientRect() :返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height,大小都是相对于文档视图左上角计算而来。

document.getClientRects() :返回元素的数个矩形区域,返回的结果是个对象列表,具有数组特性。

element.scrollIntoView() :让元素滚动到可视区域(不属于草案方法)

element.getBoundingClientRect() 详解

返回元素的大小及其相对于视口的位置。

当计算边界矩形时,会考虑视口区域(或其他可滚动元素)内的滚动操作,也就是说,当滚动位置发生了改变,top和left属性值就会随之立即发生变化(因此,它们的值是相对于视口的,而不是绝对的)。如果你需要获得相对于整个网页左上角定位的属性值,那么只要给top、left属性值加上当前的滚动位置(通过 window.scrollX 和 window.scrollY),这样就可以获取与当前的滚动位置无关的值。

javascript - 所有的视图属性和方法(offsetHeight、clientHeight、scrollHeight、innerHeight等)

四、元素视图属性

:star: clientWidthclientHeight :内容区域的高度和宽度,包括padding大小,但是不包括边框和滚动条

:star: clientLeftclientTop :内容区域的左上角相对于整个元素左上角的位置(包括边框)

:star: offsetWidthoffsetHeight :整个元素的尺寸(包括边框)

:star: offsetLeftoffsetTop :表示相对于最近的祖先定位元素(CSS position 属性不是static 的元素)的左右偏移值。

offsetParent :第一个祖定位元素(即用来计算上面的offsetLeft和offsetTop的元素)

scrollWidthscrollHeight :表示整个内容区域的宽高,包括隐藏的部分。如果元素没有隐藏的部分,则相关的值应该等用于clientWidth和clientHeight。当你向下滚动滚动条的时候,scrollHeight应该等用于scrollTop + clientHeight。

:star: scrollLeftscrollTop :表示元素滚动的像素大小。可读可写。

javascript - 所有的视图属性和方法(offsetHeight、clientHeight、scrollHeight、innerHeight等)

未脱离文档流:offsetLeft:父级元素margin+父级元素padding+父级元素border+自己margin

脱离文档流:offsetLeft:和父级元素没关系

style.width仅能返回以style方式定义的内部样式表的width属性值。

clientWidth 和 clientHeight属性会将获取的值四舍五入取整数。 如果你需要小数结果, 请使用 element.getBoundingClientRect()

又因为使用element.getBoundingClientRect()只能获取元素的width / height,但是这个值是 offsetWidth / offsetHeight ,包括边框的长度,所以不能获取clientWidth / clientHeight

五、鼠标位置

clientXclientY :相对于window,为鼠标相对于window的偏移。在iphone上,这对值返回的位置就等同于下面要提到的pageX/Y

offsetXoffsetY :表示鼠标相对于当前被点击元素padding box的左上偏移值

pageXpageY :为鼠标相对于document的坐标

screenXscreenY :鼠标相对于显示器屏幕的偏移坐标。

xy :相当于clientX/clientY。

参考资料

MDN Window对象

MDN Element对象

MDN HTMLElement

张鑫旭-CSSOM视图模式(CSSOM View Module)相关整理


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

科技投资新时代:TMT投资方法、趋势与热点聚焦

科技投资新时代:TMT投资方法、趋势与热点聚焦

马军、宋辉、段迎晟 / 人民邮电出版社 / 2018-3 / 69.00

中国 TMT 行业(科技、媒体及通信)起步较晚但充满朝气。2017 年,TMT 板块的IPO 数量占到了总数的四分之一;对于投资者来说,投资 TMT 的收益非常可观。那么,TMT 的投资趋势如何? TMT 行业又有哪些投资热点? 本书立足于 TMT 投资现状,在介绍了 TMT 投资的基本概念之后,作者详细讲述了TMT 投资的基本研究方法、分析视角、整体行情及趋势分析,同时从行业视角分析了包括......一起来看看 《科技投资新时代:TMT投资方法、趋势与热点聚焦》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具