Set `overflow: hidden` for every element

Question

Is there anyway in Javascript I can set every element to have the CSS property overflow: hidden?

I want to do exactly this:

* {overflow: hidden}

But with Javascript, and not JQuery.

I also want this to work if a new element is created on the page, like it would if I used CSS as in the example above.

why not just add that to the page as a css rule, via javascript? the css engine already does this work for you, and doing it manually is hugely painful and error-prone. — Eevee, Oct 10 '15 at 17:28
Make this with javascript is saturating the cpu processor stupidly. CSS makes exactly what you said. — Marcos Pérez Gude, Oct 10 '15 at 17:29
http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript http://jonraasch.com/blog/javascript-style-node — Sherali Turdiyev, Oct 10 '15 at 17:52

score 2 · Answer 1 · answered Oct 10 '15 at 17:33

2

I found the answer:

var style = document.createElement("style");
style.type = "text/css";
style.innerHTML = "* { overflow: hidden; }";
document.head.appendChild(style);

The most efficient I can think of.

answered Oct 10 '15 at 17:33

is `"* { overflow: hidden; }"` HTML? – Sherali Turdiyev Oct 10 '15 at 17:35
2

@SheraliTurdiyev, they are creating a style element, and this is adding the style rules to the body of the style element. Though `textContent`/`innerText` is more the proper property to use since as you question it is not html – Patrick Evans Oct 10 '15 at 17:38
1

this is exactly what i was suggesting, yes :) – Eevee Oct 10 '15 at 17:38

1 Answers1