如何使用javascript来检查css属性在chrome中是否具有！important?

Question

现在是2020年，我的目标只是chrome。我只想在 chrome 上检查它，所以这不是同一个问题。我的最终目标是避免无限的观察循环。这是我的代码：

.bg-gray-light {
background-color: #fafbfc!important;
}

var e=document.querySelector('div.pagehead.bg-gray-light');
var z= e.style.getPropertyPriority('background-color'); // here is ''
var t=getComputedStyle(e).getPropertyPriority('background-color'); //here is '' too.

那么我如何判断背景颜色是否"重要"。

仅供参考，我想观察样式更改，然后更改样式，但如果它很重要，我需要通过 e.style.setProperty(( 强制更改。 为了避免无限观察循环，我不能只是尝试改变风格。 所以我需要知道背景颜色是否"重要"。

Answer 1

恐怕getPropertyPriority方法仅适用于样式表规则。 浏览器渲染 dom 后，很难找到哪个规则更改了特定元素。dom 中的元素和 css 规则之间的联系消失了(在我看来(。

var declaration = document.styleSheets[0].cssRules[0].style;
var priority = declaration.getPropertyPriority("background-color");

参见：MDN getPropertyPriority

Answer 2

谢谢你@dandavis，我改变了我的想法。 我放弃检查"！important"，我只是尝试更改样式，但避免无限观察，如下所示：

observer.disconnect();
e.style.setProperty(
property,
rgbstring,
priority, //'important' or ''
);
regist(observer,document);

而上面的代码还不足以避免无限观察者，所以我们需要 cheek 的值是需要设置的，尤其是不要一次又一次地更改它。

谢谢@dandavis