Quiero cambiar dinámicamente el valor de uno de los atributos de la clase css
Aquí está mi escenario:
Tengo muchos elementos que usan una clase, en lugar de obtenerlos todos, repetirlos y aplicarles estilo, quiero cambiar el valor de uno de los atributos de la clase, que ya se les aplica. por ejemplo
.prodName { max-width: 270px; display: block; }la clase anterior está siendo utilizada por muchos elementos, y quiero modificar uno de los atributos de esa clase como
.prodName { max-width: 350px <--- display: block; }¿Hay algún método simple para esto en javascript?
Antes de publicar esta pregunta, ya busqué pero no encontré nada fácil y útil. gracias de antemano a las manos amigas.
Puede usar variables CSS para este caso.
const root = document.querySelector(':root'); function play() { root.style.setProperty('--size', '300px'); } :root { --size: 100px; } .container { background-color: red; width: var(--size); height: var(--size); cursor: pointer; } <div class="container" onclick="play()"></div>El único problema con el enfoque anterior es la compatibilidad con navegadores más antiguos. Si tiene que admitir IE y navegadores más antiguos donde el soporte de variables CSS no está presente, puede manejar este problema agregando una clase al contenedor principal/cuerpo.
function play() { document.body.classList.add('large') } .container { background-color: red; width: 100px; height: 100px; cursor: pointer; } .large .container { width: 300px; height: 300px; } <div class="container" onclick="play()"></div>Agregar nueva clase a CSS:
.mw350 { max-width: 350px; }Luego agregue una nueva clase al elemento en JS:
document.querySelector('.prodName').className += ' mw350'; // <-- better to select using unique IDs, like '#prodNameElement'Si va a controlar el cambio de clase/atributo css de ts, tal vez con una función o un cambio de var, puede usar ngClass: https://www.freecodecamp.org/news/angular-ngclass-example/ y tener toda la lógica donde tú quieras, fácilmente accesible.