4

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

Peter
  • 341
  • 1
  • 4
  • 16

1 Answers1

4

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.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • 2
    Alternative: [`overlay.style.setProperty("display", "none", "important");`](//developer.mozilla.org/docs/Web/API/CSSStyleDeclaration/setProperty#parameters). – Sebastian Simon Sep 11 '21 at 10:09
  • Thank you @t.j. it worked perfectly. And also thank you for the explanation. Just one more question to have a better understanding- What do you mean with rules parsing? – Peter Sep 11 '21 at 10:13
  • @SebastianSimon - Oh wow. TIL! That's not just *an* alternative, that's a **much, much** better one. Post it as an answer? – T.J. Crowder Sep 11 '21 at 10:15
  • @Peter - In a stylesheet or `style` attribute when you do `display: none !important` the `!important` isn't part of the value, the value is just `none`. The `!important` part is a priority indicator. When you do `.style.display = "x"` you can't specify the priority indicator, the property only allows actual values. That whole thing (`display: none !important`) is a *style rule* and it's parsed into its individual components. But when just a value is expected, that parsing isn't done. Side note: use `setProperty` as Sebastian showed, rather than my answer above. :-) – T.J. Crowder Sep 11 '21 at 10:18
  • 1
    @T.J.Crowder Actually, this seems to be a duplicate of [I'm unable to inject a style with an "!important" rule](/q/7917608/4642212). – Sebastian Simon Sep 11 '21 at 10:30
  • @Peter - Your question is answered [here](https://stackoverflow.com/a/7919637/157247). Would you do me a favor and un-accept the answer above? Thanks. Happy coding! – T.J. Crowder Sep 11 '21 at 10:33