0

Comunidad. Espero estén bien. Estoy poniendo un poco de estilo a este ecommerce, estoy usando flexbox para hacer la card responsive... creo las clases de estilos para las mismas, pero no sé como aplicarlas al HTML que creo desde Javascript, sé que poniendo div.Producto.classList.add se les agrega estilos a todos los div creados, pero cada div lleva clases diferentes, por ende si les agrego clases de esa forma se termina pisando todo y no queda nada bien... ¿de qué manera podría agregar estilos de manera individual para cada div desde Javascript? ¿me podrían ayudar por favor? Gracias

class Celulares {
  constructor( id, modelo, color, precio , img) {
    this.id = id ;
  this.modelo = modelo;
  this.color = color;
  this.precio = parseInt(precio);
  this.img = img ; 
 } 
}
// Aplicando ARRAY y sus metodos
const productos = [];
productos.push (new Celulares ( 3 , "SAMSUNG GALAXY J2" , "GRIS" , 10000,'img/GALAXY J2 PRIME.jpg'));
productos.push(new Celulares ( 4, "LG LK22" , "GRIS" ,  20000 ,"img/LGLK22.jpg") );
productos.push(new Celulares (  5,  "MOTO G100" , "AZUL" ,  85000,"img/MOTOG100.jpg"));
productos.push(new Celulares(  6, "ALCATEL L1" ,"NEGRO" ,  7000,"img/ALCATEL L1 NEGRO.jpg"));
productos.push(new Celulares (7, "SAMSUNG J1" ,"BLANCO" ,  7000,"img/J1 PRIME.jpg"));
productos.push(new Celulares (8, "SAMSUNG J3 PRIME", "GRIS" , 14000,"img/GALAXYU J3.jpg"));
productos.push(new Celulares (9, "SAMSUNG A51" , "BLANCO" ,45000,"img/A51.jpg"));
productos.push(new  Celulares (10,"MOTOROLA  E7 " , "NEGRO" , 22000,"img/MOTOE7.jpg"));
productos.push(new Celulares (11 , "LG Q7" , "NEGRO" , 34500,"img/LG Q7.jpg"));
productos.push(new Celulares (12 , "IPHONE 11 PRO" , "GRIS" , 283500,"img/IPHONE 11.jpg"));
productos.push(new Celulares (13 , "IPHONE  SE 128" , "BLANCO" , 161840,"img/IPHONE SE.jpg"));



console.log(productos);


for (const producto of productos) {
  let divProducto = document.createElement("div");


  divProducto.innerHTML =  `<h2 class ="  card"  >   ${producto.modelo}</h2>                                   
                            <h3 class ="  card" >  ${producto.color}  </h3>
                            <h4 class ="card" >$${producto.precio}</h4>
                            <img class ="  container card img"  src="${producto.img}" >
                            <button  id="${producto.id}"   class=" btn btn-danger">COMPRAR</button>`;
  document.getElementById("productoC").appendChild(divProducto);
}
  
const botones = document.getElementsByClassName(" btn btn-danger");
console.log(botones);
//CARRITO
const carrito = [];



function comprarManejador(event){
  const seleccionado  = productos.find(producto => producto.id == this. id);

carrito.push(seleccionado);
console.log(carrito);
localStorage.setItem("carrito" , JSON.stringify(carrito));
const divCarrito = document.getElementById("carrito");
divCarrito.innerHTML="";

for (const producto of carrito) {
  let item = document.createElement("p")
  item.innerHTML =`Articulo seleccionado : ${producto.modelo} ${producto.precio}`;
  divCarrito.appendChild(item);
}
}

for (const boton of botones) {
  boton.addEventListener("click" , comprarManejador);
  
}
//  BARRA NAVEGACION
const navToggle = document.querySelector(".nav-toggle")
const navMenu = document.querySelector(".nav-menu")

navToggle.addEventListener("click",() =>{
  navMenu.classList.toggle("nav-menu_visible");
 if(navMenu.classList.contains("nav-menu_visible")){
   navToggle.setAttribute("aria-label" , "Cerrar menu");
    }
    else{
      navToggle.setAttribute("aria-label" , "abrir menu")
    }
 }    
);
3
  • 1
    Si cada div de producto lleva una clase distinta, añade las clases durante la creación de los div. Lo que no pones es que clases pones a cada div, de que dependen esas clases.
    – Juan
    Commented el 1 ago. 2021 a las 22:54
  • ¿Podría ser también mediante un "id" así? document.getElementById("id").style.property="value" Commented el 1 ago. 2021 a las 23:08
  • 1
    Claro, o pones un atributo class ="clase" y luego defines la regla .clase o pones un atributo d i=divX luego defines la regla #divX.
    – Juan
    Commented el 1 ago. 2021 a las 23:18

1 respuesta 1

1

¿de qué manera podría agregar estilos de manera individual para cada div desde Javascript?

Para agregarle clases o atributos a un elemento en particular, en este caso un div, podes seleccionar cada uno de los div que quieras con un id

<div id='myDiv1' />
<div id='myDiv2' />

y posteriormente agregarle la clase que desees.

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.