javascript - 为什么在 DOM 中操作 CSS 时需要先检查 style.element = ''

Question

每当我尝试在 DOM 中操作 CSS 并检查 CSS 节点是否具有特定值时，如果我实际检查它是否与我的 CSS 文件中分配的值相对应，它就不会起作用。相反，我需要先根据空值检查它。下面的代码是一个例子。

var nav = document.getElementById('nav');

 if(nav.style.backgroundColor == ''){
  nav.style.backgroundColor = 'green';
  nav.firstChild.nextSibling.style.borderBottom = '2px solid yellow';
 }

上面的代码会在什么时候执行

 nav.style.backgroundColor == '';

而不是当我根据我的 css 文件中分配的实际颜色检查它时。

  nav.style.backgroundColor == 'blue';

这是为什么呢？我知道浏览器会将 HTML 文件转换为 DOM，但它不会检查 css 样式吗？

JSFiddle:http://jsfiddle.net/7AX3m/1/

编辑 在 SO 上找到另一个使用 getComputedStyle() 的链接

链接:getComputedStyle in pure Javascript?

Answer 1

style 属性返回元素的内联样式，您可以通过它修改样式，但它只能帮助您获得内联样式。要在 CSS 中获取样式(以及所有计算样式)，您必须使用 getComputedStyle 方法，但这只返回只读样式:

var style = getComputedStyle(nav);
//then style.backgroundColor would return rgb(0,0,255) which equals to blue