Javascript 为什么可以'；我是否使用JS检索元素的CSS样式属性？

因此，我试图从DOM中检索CSS属性，返回的唯一内容是“”

e、 如果我的CSS代码是

nav  {
  color: red;
}

我的javascript是

var nav = document.querySelector("nav");
var navColor = nav.style.color;
console.log(navColor);

返回到控制台的所有内容都是“”。我是JS的新手

---

如果我尝试手动创建一个var并在控制台中找到它的属性，它也会输出“”，直到我更改了style属性的值，然后它成功返回属性值-是的，我确实设置了要检索的属性，并且检查了数百次拼写。

您可以通过调用

getComputedStyle（document.querySelector（“nav”））查询应用的css规则。color

检查此链接：

const nav=document.querySelector（“nav”）；
const{color:classStyle}=getComputedStyle（nav）；
const{color:inlineStyle}=nav.style；
console.log（inlineStyle）
console.log（classStyle）

nav{
颜色：红色；
}

---

这是nav

您需要使用

getComputedStyle（）

进行以下操作：

var navColor = getComputedStyle(nav).color;

---

如注释中所述，

style

属性仅返回内联样式，如下所示：

 <div style="color: red;"></div>

您要查找的是函数，该函数可用于检索最终样式值。像这样：

 // HTML
 <div class="some-element"></div>

 // CSS
 .some-element {
      color: red;
 }

 // JS
 const someElement = document.querySelector('.some-element');
 console.log(window.getComputedStyle(someElement).getPropertyValue('color'));

//HTML
//CSS
.一些元素{
颜色：红色；
}
//JS
const someElement=document.querySelector（'.someElement'）；
log（window.getComputedStyle（someElement.getPropertyValue（'color'））；

这应该注销

red

编辑

根据注释，输出实际上是rgb（255，0，0），rgb相当于红色。正如函数名所示，它是计算样式，而不是检索它们的实际值。例如，如果使用CSS将宽度设置为

10%

，

getComputedStyle

将计算最终宽度渲染为的任何宽度的像素值。这不是最好的解决方案，但JavaScript通常不需要直接与原始CSS文件交互——这应该由CSS和（JavaScript控制的）类来管理

编辑2

仅供参考，您可以使用

.getPropertyValue（'color'）

或

.color

，我不知道开发社区中有任何偏好。

var-nav=document.querySelector（“nav”）；
console.log（getComputedStyle（nav.color）

nav{
颜色：红色；
}

---

菜单

使用.style属性，如果样式未内联，则无法访问元素css样式

您需要使用getComputedStyle函数

用法：

var nav = document.querySelector("nav");
var navColor = getComputedStyle(nav).color;
console.log(navColor);

---

有关更多信息，请参阅

，因为这不是内联SyleSi的类样式，它将注销rgba值，但这应该没问题，因为红色只是rgba值的简写：）@JoeWarner Good catch。谢谢你指出这一点。

var nav = document.querySelector("nav");
var navColor = getComputedStyle(nav).color;
console.log(navColor);