javascript - 在 Chrome 中正确设置和查询背景颜色(来自 Javascript)

Question

以下是一个 Chrome 开发工具控制台 session ，用于将文本操作为红色背景。

人们可能会注意到 background-color 和 backgroundColor 之间的区别，这在这种情况下似乎呈现出一种奇怪的关系。

> document.getElementById('38').style.backgroundColor = 'red'
"red"

> window.getComputedStyle(document.getElementById('38')).getPropertyValue('background-color')
"rgb(255, 0, 0)"

> window.getComputedStyle(document.getElementById('38')).getPropertyValue('backgroundColor')`
null

这怎么解释？

文本在浏览器中确实变红了，但 api 可能看起来有点古怪。我可能做错了什么？

Answer 1

根据 Mozilla docs .style用于通过元素的“style”属性修改元素的CSS属性

<div style="background-color: red"></div>

但它并不能为您提供元素样式状态的完整表示，即 .style不包含所有计算样式。

Here您可以看到用于 .style 的 CSS 属性的可用快捷方式.

在这个列表的第一列背景中，我们有一个 CSS 属性的原始名称 - 'background-color'以及与 .style 一起使用的快捷方式- 'backgroundColor'

使用 .getPropertyValues(prop)似乎使用第一列中的值 prop = 'background-color' , 这与 CSS 原始属性名称非常相似

对于 .style[prop]您使用第二列中的值 prop = 'backgroundColor' .

Question with a similar problem