初探CSS对象模型(CSSOM)

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

今年花了不少的时间在学习DOM相关的知识,经过这段时间的学习,可以通过一些JavaScript的API操作和处理Web页面上的HTML元素。在Web中除了DOM之外还有另外一个对象模型:CSS对象模型(即CSSOM)。或许你已经在项目中已经用过了,只不过没有意识到这一点而以。今天这篇文章中,我们主要来一起探讨有关于CSSOM相关的特性。

CSSOM是什么?

既然我们要探讨CSSOM是什么?那就很有必要先了解它是一个什么东东?MDN上对CSSOM的描述是这样的:

The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify CSS style dynamically.

大致的意思就是:CSSOM是一组允许JavaScript操作CSS的API。它非常类似于DOM,但是用于CSS而不是HTML。它允许用户动态读取和修改CSS样式。

CSSOM在W3C规范中有一个独立的模块,对于我们学习CSSOM还是很有帮助的,但相较于MDN而来,更难于阅读和理解。

为了更好的理解CSSOM是什么?我来们先来看一个简单的示例。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link href="style.css" rel="stylesheet">
        <title>Critical Path</title>
    </head>
    <body>
        <p>Hello <span>web performance</span> students!</p>
        <div><img src="awesome-photo.jpg"></div>
    </body>
</html>

// style.css
body { 
    font-size: 16px 
}
p { 
    font-weight: bold 
}
span { 
    color: red 
}
p span { 
    display: none 
}
img { 
    float: right 
}

这是一个非常简单的Web页面,“包含了一些文本和一幅图片”。浏览器处理这个页面的过程如下:

根据前面所学,其对应的DOM结构建如下:

对于Web的样式,其处理HTML有点类似,需要将收到的CSS规则转换成某种浏览器能够理解和处理的东西。因此,我们会重复HTML过程,只不过是为CSS而不是HTML:

CSS字节转换成字符,接着转换成令牌和节点,最后链接到一个CSSOM的树结构中:

是不是看上去和DOM结构树类似呀。那么CSSOM为何具有树结构呢?为页面上的任何对象计算最后一组样式时,浏览器都会先从适用于该节点的最通用规则开始,比如,如果该节点是body元素的子元素,则应用所有body样式,然后通过应用更具体的规则(这里将会运用CSS层级相关的管理规则)以递归方式优化计算的样式。

上面的示例就很形象的介绍了CSSOM。

注意,上图显示的树并非是一颗完整的CSSOM树,它只显示了我们决定在样式表中替换的样式。

事实上这一过程是相当复杂的过程,在这里不做过多的介绍,如果你感兴趣的话,可以阅读下面两篇文章:

但这一切都并不重要,重要的是我们可以通过这篇文章来学习CSSOM一些常见的特性,有利于我们更好的掌握CSSOM相关的特性和API所起的相关作用。

使用ele.style设置元素行内样式

在Web开发中,我们有的时候需要动态的控制HTML元素的样式,对于这样的场景,大多数都是通过JavaScript的API来控制HTML的style属性。面对这样的场景是使用ele.style这个API来控制style对象。我们可以通过在浏览器的控制台中,输入$0.style可以输出对应元素的style所对应的属性:

比如我们要修改表单元素input的背景颜色,我们可以这么做:

$0.style.backgroundColor='green'

这样元素input自动加下了style属性,而且值为

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/cssom-css-typed-om.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部