内容简介：重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，CSSOM 是 CSS 的对象模型，在 W3C 标准中，它包含两个部分：描述样式表和规则等 CSS 的模型部分（CSSOM），和跟元素视图相关的 View 部分（CSSOM View）。用 style 标签和 link 标签创建样式表
笔记说明
重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏， 每天10分钟，重构你的前端知识体系 ，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：kaimo313@foxmail.com。
一、介绍
CSSOM 是 CSS 的对象模型，在 W3C 标准中，它包含两个部分：描述样式表和规则等 CSS 的模型部分（CSSOM），和跟元素视图相关的 View 部分（CSSOM View）。
二、CSSOM
2.1、创建样式表
用 style 标签和 link 标签创建样式表
<style title="Hello">
a {
color:red;
}
</style>
<link rel="stylesheet" title="x" href="data:text/css,p%7Bcolor:blue%7D">
2.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.3、CSSStyleRule 的两个属性
selectorText 和 style，分别表示一个规则的选择器部分和样式部分。
1、 selector 部分 ：是一个字符串，按照选择器语法设置即可。
2、 style 部分 ：是一个样式表，它跟元素的 style 属性是一样的类型，所以可以像修改内联样式一样，直接改变属性修改规则中的具体 CSS 属性定义，也可以使用 cssText 这样的 工具 属性。
// 获取一个元素最终经过 CSS 计算得到的属性的方法 window.getComputedStyle(elt, pseudoElt);
三、CSSOM View
CSSOM View 这一部分的 API ，可以视为 DOM API 的扩展，它在原本的 Element 接口 上，添加了显示相关的功能，可以分成三个部分： 窗口部分，滚动部分和布局部分 。
3.1、窗口 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.2、滚动 API
1、视口滚动 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){
//......
})
2、元素滚动 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.3、布局 API
1、全局尺寸信息
2、元素的布局信息
有些元素可能产生多个盒，事实上，只有盒有宽和高，元素是没有的。
1、获取宽高的对象应该是 盒
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
以上所述就是小编给大家介绍的《重学前端学习笔记（二十六）--CSSOM》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Programming Amazon Web Services
James Murty / O'Reilly Media / 2008-3-25 / USD 49.99
Building on the success of its storefront and fulfillment services, Amazon now allows businesses to "rent" computing power, data storage and bandwidth on its vast network platform. This book demonstra......一起来看看 《Programming Amazon Web Services》 这本书的介绍吧!
