How to change a background url of css in javascript?-CodePudding

Below is my css code, I wanna change the url background via javascript, maybe adding it to a variable because the url will be changing depeding on some cases in my program. How do I do this? Thanks :)

body {
    width: 100vw;
    height: 100vh;
    background: url('exampleurl.com/example');
    background-color: #02203b;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

CodePudding user response：

You can use backgroundImage like:

const url = 'https://via.placeholder.com/500';
document.body.style.backgroundImage = `url(${url})`;

body {
    width: 100vw;
    height: 100vh;
    background: url('exampleurl.com/example'); /* you can use that as default */
    background-color: #02203b;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

CodePudding user response：

To change it with jquery use :

const url = 'https://via.placeholder.com/500';
$('body').css('background-image', 'url($url)');

That is if you want to change it on conditions, etc

CodePudding user response：

Good way to archieve this would be to use the JS classList function. https://developer.mozilla.org/de/docs/Web/API/Element/classList

function change() {
  const b = document.querySelector('body');
  b.classList.toggle('dark');
}

body {
    width: 100vw;
    height: 100vh;
    background: url('exampleurl.com/example');
    background-color: #02203b;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dark {
  background: black; 
  background: url('https://via.placeholder.com/500/green');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;  
}

<button onclick="change()">change</button>