了解浏览器中的渲染：CSSOM-js教程-PHP中文网

嘿，本文是有关浏览器中渲染的系列文章的一部分。如果您还没有阅读过之前的文章，请查看以下链接：

了解浏览器中的渲染：DOM

在上一篇文章中，我们探讨了浏览器如何通过 DOM（文档对象模型）处理 HTML，DOM 定义了网页的结构。然而，网页不仅仅由 HTML 组成，许多人仍然不知道 CSS 也有自己的对象形式表示，称为 CSSOM（CSS 对象模型）。

浏览器使用 CSSOM 结合 DOM 来构建页面，结合结构 (HTML) 和样式 (CSS)，从而产生和谐的视觉呈现。

在本文中，我们将加深对 CSSOM 的了解，了解它的结构、重要性以及如何操作它。

CSSOM是什么？

与 DOM 一样，CSSOM 是一种分层数据结构，但其功能是表示 Web 文档的 CSS。

CSSOM是浏览器在加载并处理样式文件后生成的。尽管它是与 DOM 分开构建的，但两者一起工作，以便浏览器可以使用正确的结构 (DOM) 组装页面并应用适当的样式 (CSSOM)。

CSSOM 的主要功能是为浏览器提供应该应用于页面上每个元素的样式的详细“地图”。

查看下面 CSSOM 的视觉表示：

Entendendo renderização no browser: CSSOM

在代码中，这种表示形式如下所示：

body {
  font-size: 16px;
}

div {
  width: 200px;
  height: 100px;
  background: blue;
}

a {
  color: red;
  text-decoration: none;
}

h1 {
  font-weight: bold;
}

登录后复制

我们之前看到的引用 CSSOM 的 DOM 树表示如下：

Entendendo renderização no browser: CSSOM

操作 CSSOM

浏览器为我们提供了一组 API，允许我们使用 javascript 操作 CSS。它类似于 DOM API，但针对 CSS 而不是 HTML。

使用此 API，我们可以动态读取和操作页面的 CSS。

操作样式的最简单方法是通过文档中存在的样式属性。

要首次访问和操作 CSSOM 元素，请打开浏览器控制台并运行以下代码：

document.body.style.background = "gray";
console.log(document.body.style.background); // gray

登录后复制

执行上面的代码片段后，我建议您检查页面元素并分析正文。请注意，现在我们的主体具有内联样式，并且看起来或多或少像这样：

body {
  font-size: 16px;
}

div {
  width: 200px;
  height: 100px;
  background: blue;
}

a {
  color: red;
  text-decoration: none;
}

h1 {
  font-weight: bold;
}

登录后复制

我们可以在页面上添加或更改任何 CSS 属性，始终遵循 element.style.propertyname 模式。

操纵内联样式的另一种方法是通过样式中存在的一些方法。

setProperty：使用此方法您可以添加或更改内联属性的值。

document.body.style.background = "gray";
console.log(document.body.style.background); // gray

登录后复制

getPropertyValue：使用此方法您可以访问内联属性的值。

<body>



<p>Isso acontece porque alterar a propriedade style de um elemento só tem efeito para estilos inlines.<br>
A mesma lógica se aplica para leitura de propriedades do style. Se você executar o código abaixo não vai ter nenhum retorno, pois nenhum momento definimos a propriedade color usando estilo inline.<br>
</p>

<pre class="brush:php;toolbar:false">console.log(document.body.style.background); // '''

登录后复制

removeProperty：使用此方法您可以删除内联属性。

document.body.style.setProperty("background", "red");

// Agora execute o próximo comando

document.body.style.setProperty("background", "blue");

登录后复制

getCompulatedStyle 仅适用于只读。您将能够访问任何元素或伪元素的样式信息，但无法进行更改。

非内联样式怎么办？

编写内联样式并不常见，因此我们还可以访问计算样式，即我们在样式表中定义的样式。为此，我们可以直接访问和操作我们的样式表。

在浏览器控制台中运行下面的代码片段：

document.body.style.getPropertyValue("background"); // blue

登录后复制

有了它，您将可以访问 html 头部声明的所有样式表。

这些样式表以列表格式返回（看起来像数组，但其实不是），您可以通过索引访问它。

document.body.style.removeProperty("background");

登录后复制

从现在开始，我建议在其他地方运行测试，因为这个博客是用 Tailwind CSS 制作的，并且操作样式表变得更加复杂。

访问此页面并在其控制台中执行命令。

document.styleSheets;

登录后复制

通过执行上面的代码，您将可以访问样式表中存在的所有 CSS。按照与上面相同的逻辑，您可以通过索引访问元素。

document.styleSheets[1];

登录后复制

在上面的代码中，我正在访问页面主体样式声明。

document.styleSheets[0].cssRules;

登录后复制

通过访问 style 属性，我们可以添加或更改任何 CSS 属性，但无需编写内联样式。

我建议您通过更改索引和更改不同元素的 CSS 来更多地使用此 api。

结论

就像 DOM 一样，CSSOM 是浏览器用于渲染过程的树形表示形式。

我们可以访问页面的所有 CSS 并使用 javascript 自由操作它。了解如何执行此类操作对于理解样式组件、线性等 CSS 工具至关重要

基础知识最重要，但却经常被忽视。
在 Web 开发中，了解 HTML、CSS、JavaScript 以及浏览器的工作原理至关重要。有了这个坚实的基础，您将能够学习源自这些基础知识的任何技术。

非常感谢！！

感谢您来到这里！

我希望您在阅读本文时学到了一些新东西。

下次再见！

参考

CSS 对象模型

构建对象模型

CSSOM — CSS 对象模型

CSS 对象模型 (CSSOM) 简介和指南

以上是了解浏览器中的渲染：CSSOM的详细内容。更多信息请关注PHP中文网其他相关文章！