为什么只能从javascript访问某些CSS样式？

下面是css的一个示例块：

p {
  position: relative;
  color: blue;
  font-size: 100%; 
  top: 100px
}

然后，如果我包含一个段落标记，它在被单击时调用javascript函数：

<p onclick="logStyles(this)">Test</p>

元素的颜色值显示在控制台中，我可以从javascript中将其值更改为蓝色。但是后两个函数不向控制台记录任何内容，这些样式值是不可访问的

 red page.html:16
     page.html:17
     page.html:18

为什么会这样？我正在运行最新版本的Chrome

css和javascript文件通过头部中的链接包含，如下所示：

 <script src="js_methods.js"></script>
 <link rel="stylesheet" type="text/css" href="stylesheet.css">

---

你说的是电脑风格。这与内联样式有所不同

---

请参阅：

通过这种方式，您只能获得与HTMLElement对象直接关联的样式。您要查找的是计算样式：

var styles = window.getComputedStyles(elem);
console.log(styles["color"]);

---

请参见

DOM节点上的style对象只提供与元素直接关联的样式，而不提供CSS文件中的样式。重复？例如，可能有更好的帖子可用。@Teemu我同意这是一个骗局，但我不太记得要搜索的合适术语。谢谢你指出这一点。例如，我可以通过编写window.getComputedStyleobj.fontSize来访问fontSize

var styles = window.getComputedStyles(elem);
console.log(styles["color"]);