为什么我需要检查风格.''首先是在DOM中操作CSS

Why do I need to check for style.element = '' first when manipulating CSS in DOM

本文关键字：DOM CSS 操作 风格 检查 为什么      更新时间：2023-09-26

每当我尝试在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在纯Javascript?

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

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

您必须使用以下代码

if(window.getComputedStyle(nav).backgroundColor == 'rgb(0, 0, 255)') 
.....

窗口。getComutedStyle文档获取更多信息

  • 您使用getComputedStyle来访问活动样式表修改，而nav.style.....访问DOM渲染初始运行时设置的属性。
相关文章：