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

Question

以下是css的示例块：

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

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

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

奇怪的是，只有一些风格可以访问......

function logStyles(obj) {
    console.log(obj.style.color);
    console.log(obj.style.position);
    console.log(obj.style.fontSize);
};

元素的颜色值显示在控制台中，我可以将其值改为从我的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">

Answer 1

你在谈论COMPUTED风格。这与内联风格有所不同。

请参阅：How do I get a computed style?

Answer 2

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

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

请参阅mozilla