CSSOM常用属性及方法总结

CSSOM常用属性及方法

1. window 视图属性

  • innerWidthinnerHeight
    表示浏览器window窗口的宽高,不包括用户界面元素,如工具栏

  • outerWidthouterHeight
    表示整个浏览器的窗口的宽高,包括用户界面元素,如工具栏

  • pageXOffsetpageYOffset
    表示整个页面的垂直滚动像素值和水平滚动像素值

  • screenXscreenY
    表示整个浏览器相对于屏幕左上角的偏移位置

2. Screen视图属性

  • widthheight
    表示显示器的宽高

  • availWidthavailHeight
    表示显示器的可用宽高,不包括底部任务栏

3. Document视图方法

  • getBoundingClientRect()
    使用此方法可以得到元素的矩形界限,返回值是一个对象,包含toprightbottomleft四个属性值,大小都是相对于文档视图的左上角计算得到的

  • scrollIntoView()
    让元素滚动到可视区域,可传入一个对象,配置相应的参数

4. Element Object 相关属性

  • clientWidthclientHeight
    表示内容区域加上 padding 区域的大小,不包括 border 以及 margin 和滚动条

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

  • offsetWidthoffsetHeight
    表示内容区域加上 paddingborder 的大小,不包括 margin 和滚动条

  • offsetLeftoffsetTop
    表示相对于最近的祖先定位元素(position: relative/absolute/fixed)的偏移值

  • offsetParent
    返回最近的最先定位元素

  • scrollWidthscrollHeight
    表示整个内容区域的宽高包括隐藏部分。如果没有隐藏部分,则其相关值等同于 clientWidthclientHeight,当向下滚动时,应该加上 scrollHeight

  • scrollLeftscrollTop
    表示元素滚动的像素大小

5. MouseEvent 相关属性

  • pageXpageY
    表示鼠标相对于 document 的偏移

  • clientXclientY
    表示鼠标相对于 window 的偏移

  • offsetXoffsetY
    表示鼠标相对于当前被点击元素 padding box/content box/border box的左上便宜,不同的浏览器兼容性不一样

  • screenXscreenY
    表示鼠标相对于显示器屏幕的左上偏移

6. demo演示