javascript - 为什么我不能使用 JS 检索元素的 CSS 样式属性?

标签 javascript css

<分区>

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

例如如果我的 CSS 代码是

nav  {
  color: red;
}

我的 javascript 是

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

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

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

最佳答案

Check this link: 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>

关于javascript - 为什么我不能使用 JS 检索元素的 CSS 样式属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52948609/

上一篇:javascript - 尝试创建一个在无和阻止之间切换显示的按钮,只能使用一次

下一篇:html - CSS 未应用于 HTML

相关文章:

具有背景颜色和透明图像的 HTML 表格 : border on bottom

javascript - Gulp 4 - CSS 缩小和重命名

javascript - 验证 Iterator 与 AsyncIterator 类型

javascript - 在 codeigniter 中以时间戳格式搜索查询

javascript - 如何创建我自己的 JavaScript 对象?

javascript - IOS Chrome 选择框宽度问题

html - 为什么主体上的边距 0 不会删除 h1 元素上的边距?

javascript - 在数组中存储对值的引用,然后重新分配原始变量 (JavaScript)

javascript - 在 d3 时间轴的开头添加额外的刻度

jquery - 可展开列表仅在第二次点击后展开