Changing the background property of the html, not the body-CodePudding

How do I change the background property of the html? I was able to change the background of the body element, but I want to manipulate the html "tag" (?).

Code to manipulate the body background

document.body.style = 'background: radial-gradient(circle, rgba(131,170,203,1) 4%, rgba(69,113,148,1) 50%, rgba(39,71,97,1) 100%);';

These attempts didn't work

document.html.style = 'background: red';
document.style = 'background: red';

I want to change this part

html {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

    background: radial-gradient(circle, rgba(131,170,203,1) 4%, rgba(69,113,148,1) 50%, rgba(39,71,97,1) 100%);
}

CodePudding user response：

You need to use document.documentElement.style to target the html element.

document.body.style = 'background: radial-gradient(circle, rgba(131,170,203,1) 4%, rgba(69,113,148,1) 50%, rgba(39,71,97,1) 100%);';

document.documentElement.style = 'background: red';

<html>
  <body>
    <p>test</p>
  </body>
</html>

CodePudding user response：

change background by javascript in html tag try this :

document.getElementsByTagName('html')[0].style.background="radial-gradient(circle, rgba(131,170,203,1) 4%, rgba(69,113,148,1) 50%, rgba(39,71,97,1) 100%)";

CodePudding user response：

just put a background-div in the DOM and manipulate it. e.G. position: absolute / z-index: -1