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)相关整理


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

查看所有标签

猜你喜欢:

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

The Black Box Society

The Black Box Society

Frank Pasquale / Harvard University Press / 2015-1-5 / USD 35.00

Every day, corporations are connecting the dots about our personal behavior—silently scrutinizing clues left behind by our work habits and Internet use. The data compiled and portraits created are inc......一起来看看 《The Black Box Society》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具