javascript - 如何识别 css 类是否具有 extjs 中的属性

Question

我有一个元素

<div class="x-window-header  x-header x-header-draggable x-docked 
 x-unselectable x-window-header-default x-horizontal x-window-header-horizontal 
 x-window-header-default-horizontal x-top x-window-header-top x-window-header-default-top 
 x-box-layout-ct" id="messagebox-1001_header"></div>

如何识别哪个类定义了 background-color 属性？我试过:

var headercls_list = document.getElementById('message-box').firstChild.classList;
      for (i = 0; i < headercls_list.length; i++) 
          {
            if (document.getElementsByClassName(headercls_list[i]).hasOwnProperty('background-color')) 
                {
                    headercls_list[0].style.backgroundColor = '#F00';
                }
          }

即使是具有属性 background-color 的正确类也会返回 false!这里有什么问题？我正在使用 DOM。如果可以用extjs来完成。请建议

Answer 1

使用 jQuery:

$(document.getElementsByClassName(headercls_list[i])).css('background-color') !== 'rgba(0, 0, 0, 0)'

或不使用 jQuery:

var el = document.getElementsByClassName(headercls_list[i])[0];
var backgroundColor = window.getComputedStyle(el).getPropertyValue('background-color');
background !== 'rgba(0, 0, 0, 0)'

如果它对您不起作用，更高级的方法是使用 https://github.com/Box9/jss .然后你可以详分割析每个类:

jss.get('.my-class')['background-color']