adding styles to HTML and Body using JavaScript

Question

I want to add these styles I present as CSS to HTML and Body tag using Javascript:

html, body {
  overflow-y:hidden;
  height:100%;
}

The question is HOW?

The question actually is why ? – Abhishek Ranjan Jun 18 '20 at 14:43 — Abhishek Ranjan, Jun 18 '20 at 14:43

score 1 · Answer 1 · answered Jun 18 '20 at 14:45

1

That's rather easy:

var html = document.documentElement; // <html> tag
var body = document.body; // <body> tag

html.style.height = body.style.height = '100%';
html.style.overflowY = body.style.overflowY = 'hidden';

answered Jun 18 '20 at 14:45

David

3,552
1
13
24

Serket · Answer 2 · 2020-06-18T14:45:32.487

0

You can do this by using querySelector or, if there are multiple instances of the element, querySelectorAll. You do this like this:

document.querySelector("html").style.overflowY = "hidden";
document.querySelector("html").style.height = "100%";
document.querySelector("body").style.overflowY = "hidden";
document.querySelector("body").style.height = "100%";

If you don't like querySelector, you should know that there is a plethora of different ways to do this, like document.getElementByTagName("html")

edited Jun 18 '20 at 14:45

answered Jun 18 '20 at 14:44

Serket

3,785
3
14
45

syntax error; should be `overflowY`, not `overflow-y` – Gershom Maes Jun 18 '20 at 14:45
@Gershom sorry!! fixed it – Serket Jun 18 '20 at 14:45

adding styles to HTML and Body using JavaScript

2 Answers2