Question

所以我试图从DOM中检索CSS属性，唯一返回的是“” ...

例如如果我的CSS代码是

nav  {
  color: red;
}

我的JavaScript是

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

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

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

Answer 1

检查此链接：https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

const nav = document.querySelector("nav");
const { color: classStyle } = getComputedStyle(nav);
const { color: inlineStyle } = nav.style;


console.log(inlineStyle)
console.log(classStyle)

nav  {
  color: red;
}

<nav>this is nav</nav>

Answer 2

您将需要使用getComputedStyle()：

var navColor = getComputedStyle(nav).color;

Answer 3

您可以通过调用getComputedStyle(document.querySelector("nav")).color

来查询已应用的CSS规则

Answer 4

如评论中所述，style属性仅返回内联样式，如：

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

会返回...

 "color: red;"

您正在寻找的是window.getComputedStyle函数，该函数可用于检索最终样式值。像这样：

 // 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'));

这应该注销red。

编辑

每个注释的输出实际上将是rgb(255, 0, 0)，相当于红色的RGB。就像函数名称所暗示的那样，它是 computing 样式，而不是检索其实际值。例如，如果您使用CSS设置的宽度为10%，则getComputedStyle会计算最终渲染为的宽度的像素值。这不是最好的解决方案，但是JavaScript通常不需要直接与原始CSS文件进行交互-应该由CSS和（受JavaScript控制的）类来管理。

编辑2

仅供参考，您可以使用.getPropertyValue('color')或仅使用.color，但我不知道开发社区中的任何偏好。

Answer 5

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

nav  {
  color: red;
}

<nav>Menu</nav>

Answer 6

使用.style属性，如果样式不是内联的，则不能访问元素css样式。

您需要使用getComputedStyle函数。

用法：

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

有关更多信息，请参阅this link

为什么我无法使用JS检索元素的CSS样式属性？

6 个答案: