JavaScript windows getComputedStyle() 方法

getComputedStyle() 函数会返回一个 CSS 样式声明对象。通过 JavaScript 的 windows getComputedStyle() 函数，可以获取元素的 CSS 属性和值。该元素使用计算样式显示来自各种样式源的样式。

语法

以下语法展示了 JavaScript 中 windows getComputedStyle() 方法的使用。

或

以下语法展示了 getComputedStyle() 方法的使用。

参数

getComputedStyle() 方法可以接受两个参数。

• 你想返回已计算的样式。该方法将返回一个错误，如果你传递一个不同类型的节点，例如文本节点。
• pseudoElement 指定要匹配样式的伪元素。默认值为 null，此参数是可选的。

返回值

• getComputedStyle() 方法返回的 CSS 样式声明对象的实时样式对象是元素。
• 当元素的样式被修改时，样式会自动更新。

工作原理

• 首先，在 HTML 文件的 head 部分设置 message 类的 CSS 规则。
• 其次，使用内联样式指定一个具有红色内容的段落元素。此元素将覆盖 head 部分的规则。
• 第三，使用 getComputedStyle() 函数获取与该段落元素相关的所有计算样式。

JavaScript 中 getComputedStyle() 的示例

以下示例使用 style 标签和属性来演示 getComputedStyle() 函数。getComputedStyle() 方法所需的 CSS 属性。

示例 1： 以下示例展示了一个基本的 getComputedStyle() 方法。使用 JavaScript 方法显示内边距、颜色、边框和背景颜色。CSS 值使用 style 标签设置。

输出

该图像展示了网页功能的 CSS 样式。

示例 2： 以下示例展示了一个基本的 getComputedStyle() 方法。使用 CSS style 标签和不使用 CSS style 标签来显示内边距、颜色、边框和背景颜色。该方法不使用 getComputedStyle() 方法显示默认样式。

输出

该图像展示了网页功能的 CSS 样式。

示例 3： 在 HTML 文件的 head 部分，为每个段落元素的第一个字母设置 CSS 规则。

然后可以使用 getComputedStyle() 函数获取伪元素的计算样式。具有 id 的段落的初始字母的字体大小为 16px。

输出

该图像展示了网页功能的 CSS 样式。

示例 4： 以下示例展示了带有内联 style 标签的 getComputedStyle() 方法。使用 JavaScript 方法显示字体大小、颜色、边框、宽度和背景颜色。CSS 值使用内联 style 标签设置。

输出

该图像展示了网页功能的内联 CSS 样式。

示例 5： 以下示例展示了一个带有 style 标签的 window.getComputedStyle() 方法。使用 JavaScript 方法，在页面中使用元素和伪元素设置了属性。CSS 值在网页的 head 部分的 style 标签中使用。

输出

该图像展示了网页功能的内联 CSS 样式。

示例 6： 以下示例展示了一个带有 style 标签的 window.getComputedStyle() 方法。使用 JavaScript 方法，在页面中使用元素和伪 null 元素设置了属性。CSS 值使用 style 标签设置，但不需要为元素使用。

输出

该图像展示了网页功能的 CSS 样式。

结论

getComputedStyle() 方法用于显示元素的可用 CSS 属性。我们可以为 style 标签使用不同的属性并将其显示为输出。