How to select document body in Javascript

Question

I have a simple vue component that will display a preloader when some images are loaded or changes. It's working fine, but I'm not able to disable the overflow of the document body when the component is displayed. Is there a way in Javascript to select the body and set the overflow to hidden? I'm not expert in vanilla javascript.

To get the body just use `document.body` – VLAZ May 21 '20 at 13:59 — VLAZ, May 21 '20 at 13:59

score 6 · Accepted Answer · answered May 21 '20 at 14:00

6

You can use querySelector to select any item in your DOM. Here is the mdn_link for details

If you want to select the body then simply you can use document.body

answered May 21 '20 at 14:00

Sifat Haque

5,357
1
16
23

Thanks for the answer. I will use it. I'm trying now using `document.getElementsByTagName('body').css.overflow = 'hidden';` but I'm not sure if this the best way. – guggio May 21 '20 at 14:06
@guggio `getElementsByTagName` returns a collection, not a single element. Also, you cannot use `.css` on a DOM element. – VLAZ May 21 '20 at 14:08
@VLAZ ok, so how I apply a css rule to the body with JS? – guggio May 21 '20 at 14:10
@guggio https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style – VLAZ May 21 '20 at 14:14
1

You can simple do this `document.getElementsByTagName("body")[0].style.overflow = "hidden";` or `document.body.style.overflow = 'hidden'` – Sifat Haque May 21 '20 at 14:15
@SifatHaque normally your suggestion works fine, but I have a `Cannot set property 'overflow' of undefined` error in concole when the vue component is mounted :( !! – guggio May 21 '20 at 14:27
You can use `onload` to check if body is loaded or not and then do your stuff. You can study this link https://stackoverflow.com/questions/588040/window-onload-vs-document-onload – Sifat Haque May 21 '20 at 14:30

How to select document body in Javascript

1 Answers1