So this might be an odd question. But I tried to hide a certain HTML element on the bbc.com website with using element.style.display = 'none !important' in my Google Chrome Console. Strangely it does not hide the element as I would expect it.
Maybe it is something minor and I am just overseeing something.
Here is the code I use:
var overlay = document.querySelector("div[class='fc-dialog-overlay']");
overlay.style.display = 'none !important';
I do not get an error and if I inspect the element it also contains the new property and looks like <div class="fc-dialog-overlay" style="display: none;"></div>, but it can still be seen.
The same problem occurs with several other elements like the class='fc-consent-root'.
Note: Don't do the setAttribute thing below, use setProperty as shown in this answer to the earlier question. (I'll delete this answer when/if it's un-accepted by the OP.)
You're specifying an invalid property value; !important can be used in style rules but not in the specific values you assign via the style object. I'm surprised you're seeing the display: none in the style area. I don't with Chrome or Firefox when I do that (perhaps it was left over from having done .display = "none" and not seeing it work?):
const overlay = document.getElementById("example");
overlay.style.display = "none !important";<div id="example">x</div>
<div>y</div>If I right-click x and look at it, it doesn't have a style at all, even after the code runs.
You can still do it, you just have to assign to the entire style attribute so you get full rules parsing:
const overlay = document.getElementById("example");
overlay.setAttribute(
"style",
overlay.getAttribute("style") + "; display: none !important"
);#example {
display: block !important;
}<div id="example">x</div>
<div>y</div>Note that it works even though I have a conflicting !important rule applied via a stylesheet. That's because a stylesheet !important rule overrides an inline style unless the inline style also has !important.