A continuación se muestra mi código css, quiero cambiar el fondo de la url a través de javascript, tal vez agregándolo a una variable porque la url cambiará dependiendo de algunos casos en mi programa. ¿Cómo hago esto? Gracias :)
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; }Puedes usar backgroundImage como:
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; }Una buena manera de lograr esto sería usar la función JS classList.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>Para cambiarlo con jquery use:
const url = 'https://via.placeholder.com/500'; $('body').css('background-image', 'url($url)');Es decir, si desea cambiarlo según las condiciones, etc.