0

La pregunta que me hago es cómo puedo cambiar entre 2 imágenes en el elemento body sin ponerle un identificador de etiqueta. Se puede hacer algo cómo lo siguiente:

function CambiarBackground(){
  let Direccion1 = "./Image1.jpg";
  let Direccion2 = "./Image2.jpg";
  let ControldeImagen = document.body;
  ControldeImagen.src = Direccion2;
}

No estoy seguro de si tengo buena sintaxis o es que algo no va así. Lo que no se es cómo llamar al body para completar sus propiedades desde una función javascript, sin el obvio identificador que podría ponerle.

No se cómo va esto del doom si alguien me puede aclarar cómo cambiaria la imagen seria de agradecer.

Gracias de antemano.

1
  • 1
    Con document.body tal como lo tienes, pero el body no tiene una propiedad src ni menos que funcione como una imagen. Creo que lo mejor es que expliques que es lo que quieres hacer
    – Yussef
    Commented el 2 nov. a las 22:28

2 respuestas 2

1

Existe el método setAttribute() define o reemplaza un atributo de un elemento HTML. Si el atributo no existe, se crea.

El método setAttribute() tiene dos parámetros.

El primer parámetro recibe una string que es el nombre del atributo a definir o modificar, puede ser href, class, src.
El segundo parámetro es otra string, el nuevo valor que se va a asignar al atributo especificado.

controlDeImagen.setAttribute("style", `background-image: url('${nuevaImagen}');`);

        function cambiarBackground() {
            let direccion1 = "https://cdn.pixabay.com/photo/2019/10/03/12/12/javascript-4523100_1280.jpg";
            let direccion2 = "https://cdn.pixabay.com/photo/2014/08/18/07/36/humboldt-penguin-420444_960_720.jpg";
            let controlDeImagen = document.body;
            
            let nuevaImagen = Math.random() < 0.5 ? direccion1 : direccion2;
            controlDeImagen.setAttribute("style", `background-image: url('${nuevaImagen}'); background-size: cover;`);
        }
        
        
        
cambiarBackground()
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

</body>
</html>

0

Los elementos de tipo body no tienen atributo src.

Sin embargo, puedes usar el estilo CSS background-image para ponerle una imagen de fondo a un elemento que no sea de tipo image.

Los estilos de los elementos se pueden modificar en Javascript a través de la propiedad style.

document.body.style.backgroundImage = 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDUxRjY0ODgyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDUxRjY0ODkyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENTFGNjQ4NjJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENTFGNjQ4NzJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuT868wAAABESURBVHja7M4xEQAwDAOxuPw5uwi6ZeigB/CntJ2lkmytznwZFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYW1qsrwABYuwNkimqm3gAAAABJRU5ErkJggg==")'

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.