Actualmente estoy trabajando en un sitio web donde necesito agregar contenido dinámicamente a través de JavaScript. Estoy trabajando con UIKit (https://getuikit.com/docs/slider).

Esto es lo que quiero lograr:

<img src="images/photo.jpg" alt="" uk-cover>

Lo que ya probé:

img = document.createElement("img");
img.ukcover = "";

Entonces, ¿cómo agrego el uk-cover a mi etiqueta img html? ¡Gracias!

3
inxoy 8 sep. 2018 a las 19:51

5 respuestas

La mejor respuesta

Para establecer el atributo puede usar img.setAttribute ("uk-cover", "")

1
Chris Li 8 sep. 2018 a las 17:04

Puede usar setAttribute() y pasar el segundo argumento como una cadena en blanco.

img = document.createElement("img");
img.setAttribute('uk-cover','');
img.src = "https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
document.body.appendChild(img);
1
Fullstack Guy 8 sep. 2018 a las 16:59

Puede usar Element.setAttribute() que

Establece el valor de un atributo en el elemento especificado. Si el atributo ya existe, el valor se actualiza; de lo contrario, se agrega un nuevo atributo con el nombre y el valor especificados.

let img = document.createElement("img");
img.setAttribute('src', 'images/photo.jpg');
img.setAttribute('alt', 'photo');
img.setAttribute('uk-cover', '');
document.body.appendChild(img)
console.log(img);

Tenga en cuenta: configuré texto predeterminado en el atributo alt porque las imágenes con solo valor visual deberían tener un atributo alt vacío establecido en ellas.

1
Mamun 8 sep. 2018 a las 17:22

La notación de puntos no funciona con casos con guión. Utilice Element.setAttribute

const img = document.createElement("img");
img.setAttribute('uk-cover', "https://picsum.photos/300");
1
Adam Azad 8 sep. 2018 a las 16:57

Puede hacer esto con el método setAttribute(propertyName, value).

img = document.createElement("img");
img.setAttribute("ukcover", "");
img.setAttribute("src", "images/photo.jpg");
img.setAttribute("alt", "");
1
michaelitoh 8 sep. 2018 a las 16:57