Shortest way to add CSS rules with vanilla JS

Question

I'm working on a library that I'm trying to keep it below 1KB. Which I'm already very close to my limits. I need to add a css rule to control show hide behaviour.

[hidden]{ display:none !important }

HTML page does not have any style tags. This will be only rule I need. I can only add it with pure JS. I do not want to change the style of an element with el.style.display = 'none'. I want to do it with an attribute.

So how can I add this, I found solutions that create a style element and set it's innerHTML and append it to head element. I'm hoping I can get an answer / a hack to maybe do it with less characters.

Create your stylesheet inside JS file then create script tag. InnerText the stylesheet and append child to head — Sergey
– Sergey, Commented Jun 30, 2019 at 13:11

chickens · Accepted Answer · 2021-12-21 07:54:48Z

6

This is the shortest I got, please make it shorter if you can.

const addCSS = s => document.head.appendChild(document.createElement("style")).innerHTML = s;

// Usage:
addCSS("[hidden]{ display:none !important }");

edited Dec 21, 2021 at 7:54

answered Jun 30, 2019 at 14:01

chickens

22.7k7 gold badges62 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jussi Palo Over a year ago

You can remove spaces inside the CSS rule: "[hidden]{display:none!important}" and around equals signs. (yeayea, I know;)

Reza Saadati · Accepted Answer · 2019-06-30 13:07:44Z

2

If you want to hide an element with an attribute, simply use the attribute hidden.

Example:

<div hidden class="container"></div>

If you do not want to use el.style.display = 'none', you could also use cssText to use your whole style in only 1 string.

Example:

document.querySelector('.container').style.cssText = 'width: 100vw; height: 100vh; background: rebeccapurple;';

<div class="container"></div>

Another option would be using the method CSSStyleSheet.insertRule().

The CSSStyleSheet.insertRule() method inserts a new CSS rule into the current style sheet, with some restrictions.

Example:

const css = window.document.styleSheets[0];
css.insertRule(`
  .container {
    width: 100vw;
    height: 100vh;
    background: rebeccapurple;
  }
`, css.cssRules.length);

<div class="container"></div>

answered Jun 30, 2019 at 13:07

Reza Saadati

5,4644 gold badges33 silver badges69 bronze badges

1 Comment

Nino Filiu Over a year ago

Nice hacks, didn't know about them. Not sure it exactly answers the OP though.

Collectives™ on Stack Overflow

Shortest way to add CSS rules with vanilla JS

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related