重学前端学习笔记（二十六）--CSSOM

时间 2019-12-05

标签前端学习笔记二十六 cssom 繁體版

原文原文链接

笔记说明

重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，天天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的能够加入winter的专栏学习【原文有winter的语音】，若有侵权请联系我，邮箱：kaimo313@foxmail.com。

1、介绍

CSSOM 是 CSS 的对象模型，在 W3C 标准中，它包含两个部分：描述样式表和规则等 CSS 的模型部分（CSSOM），和跟元素视图相关的 View 部分（CSSOM View）。

2、CSSOM

2.一、建立样式表

用 style 标签和 link 标签建立样式表

<style title="Hello">
a {
  color:red;
}
</style>
<link rel="stylesheet" title="x" href="data:text/css,p%7Bcolor:blue%7D">

2.二、CSSOM API 的基本用法

// 获取文档中全部的样式表
document.styleSheets

// 虽然没法用 CSSOM API 来建立样式表，可是能够修改样式表中的内容
document.styleSheets[0].insertRule("p { color:pink; }", 0)
document.styleSheets[0].removeRule(0)

// 获取样式表中特定的规则（Rule），(使用它的 cssRules 属性来实现)
document.styleSheets[0].cssRules

2.三、CSSStyleRule 的两个属性

selectorText 和 style，分别表示一个规则的选择器部分和样式部分。

一、selector 部分：是一个字符串，按照选择器语法设置便可。css

二、style 部分：是一个样式表，它跟元素的 style 属性是同样的类型，因此能够像修改内联样式同样，直接改变属性修改规则中的具体 CSS 属性定义，也能够使用 cssText 这样的工具属性。html

// 获取一个元素最终通过 CSS 计算获得的属性的方法
window.getComputedStyle(elt, pseudoElt);

3、CSSOM View

CSSOM View 这一部分的 API，能够视为 DOM API 的扩展，它在本来的 Element 接口上，添加了显示相关的功能，能够分红三个部分： 窗口部分，滚动部分和布局部分。

3.一、窗口 API

用于操做浏览器窗口的位置、尺寸等。

moveTo(x, y)：窗口移动到屏幕的特定坐标
moveBy(x, y)：窗口移动特定距离
resizeTo(x, y)：改变窗口大小到特定尺寸
resizeBy(x, y)：改变窗口大小特定尺寸

// 窗口 API 还规定了 window.open() 的第三个参数：
window.open("about:blank", "_blank" ,"width=100,height=100,left=100,right=100" )

3.二、滚动 API

一、视口滚动 API

可视区域（视口）滚动行为由 window 对象上的一组 API 控制

scrollX：是视口的属性，表示 X 方向上的当前滚动距离，有别名 pageXOffset
scrollY：是视口的属性，表示 Y 方向上的当前滚动距离，有别名 pageYOffset
scroll(x, y)：使得页面滚动到特定的位置，有别名 scrollTo，支持传入配置型参数 {top, left}
scrollBy(x, y)：使得页面滚动特定的距离，支持传入配置型参数 {top, left}
经过这些属性和方法，能够读取视口的滚动位置和操纵视口滚动。前端

// 监听视口滚动事件，须要在 document 对象上绑定事件监听函数
document.addEventListener("scroll", function(event){
  //......
})

二、元素滚动 API

在 Element 类，为了支持滚动，加入了如下 API。浏览器

scrollTop：元素的属性，表示 Y 方向上的当前滚动距离。
scrollLeft：元素的属性，表示 X 方向上的当前滚动距离。
scrollWidth：元素的属性，表示元素内部的滚动内容的宽度，通常来讲会大于等于元素宽度。
scrollHeight：元素的属性，表示元素内部的滚动内容的高度，通常来讲会大于等于元素高度。
scroll(x, y)：使得元素滚动到特定的位置，有别名 scrollTo，支持传入配置型参数 {top, left}。
scrollBy(x, y)：使得元素滚动到特定的位置，支持传入配置型参数 {top, left}。
scrollIntoView(arg)：滚动元素所在的父元素，使得元素滚动到可见区域，能够经过 arg 来指定滚到中间、开始或者就近。

// 可滚动的元素也支持 scroll 事件，在元素上监听它的事件便可
element.addEventListener("scroll", function(event){
  //......
})

3.三、布局 API

一、全局尺寸信息

二、元素的布局信息

有些元素可能产生多个盒，事实上，只有盒有宽和高，元素是没有的。

一、获取宽高的对象应该是盒函数

CSSOM View 为 Element 类添加了两个方法： getClientRects()和getBoundingClientRect()。

getClientRects：会返回一个列表，里面包含元素对应的每个盒所占据的客户端矩形区域，这里每个矩形区域能够用 x, y, width, height 来获取它的位置和尺寸。工具

getBoundingClientRect：返回元素对应的全部盒的包裹的矩形区域，须要注意，这个 API 获取的区域会包括当 overflow 为 visible 时的子元素区域。布局

我的总结

最后面两个API兼容性很是好，定义又很是清晰。实现视觉效果超级棒。。。学习

// 你们能够试一试在控制台输出下面3个
document.documentElement
// >>> <html>...</html>

document.documentElement.getClientRects()
// >>> DOMRectList

document.documentElement.getBoundingClientRect()
// >>> DOMRect