How can i use javascript to check if a css property has !important in chrome?

Question

now is 2020, and my target is chrome only. I want to check it on chrome only, so it is not same question. and my final goal is to avoid an infinite observe loop. this is my code:

.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.

So how do I judge whether the background-color is '!important'.

FYI, I want to observe the style change and then change the style, but if it is !important, i need to force the change by e.style.setProperty(). To avoid the infinite observe loop, i can not just try to change the style. So i need to know whether the background-color is '!important'.

Does this answer your question, it includes a full function besides the getPropertyPriority? [Check if css property has !important attribute applied](https://stackoverflow.com/questions/10314131/check-if-css-property-has-important-attribute-applied) — imvain2, May 21 '20 at 18:40
i have read it, but my target is chrome, so is there more simple solution? — defend orca, May 21 '20 at 18:43
i doubt anyone will notice if you manually set `#fafbfd` instead of `#fafbfc`, but you can easily detect the difference in JS to prevent infinite loops. — dandavis, May 21 '20 at 18:59
@dandavis, just because change fail, so infinite loop, so i need check it before js code change the style. — defend orca, May 21 '20 at 19:08

score 3 · Accepted Answer · answered May 21 '20 at 18:42

3

I'm afraid that the getPropertyPriority method works on stylesheet rules only. After the browser rendered the dom, it's hard to find which rule has changed an specific element. The connection between element in dom and css rule is gone (in my opinion).

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

See: MDN getPropertyPriority

answered May 21 '20 at 18:42

Marc

1,836
1
10
14

it only works for styles set inline on the element, not for my code, that style defined by css class. – defend orca May 21 '20 at 18:54
my wrong, your code get all 'background-color' ? how can i get special one element's style priority? – defend orca May 22 '20 at 11:32
can you explain that priority is which element? because i just get '' , a empty string – defend orca May 22 '20 at 11:35

defend orca · Answer 2 · 2020-05-23T06:10:17.680

thank you @dandavis, i have change my idea. i give up to check the '!important', i just try to change the style, but avoid infinite observe, like this:

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

and above code is not enough to avoid infinite observer, so we need cheek the value is need to set, especially don't change it again and again.

thanks @dandavis

How can i use javascript to check if a css property has !important in chrome?

2 Answers2