Me gustaría agregar una propiedad directamente a una clase en lugar de objetos que tienen una clase dada.
También debería funcionar para elementos agregados dinámicamente.
Intenté hacerlo usando $(".myElement").css("background", "green"); pero funciona sólo para elementos ya existentes, los nuevos elementos se crean con propiedades de clase predeterminadas.
Mi código es:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<style>
.myElement{
width: 20px;
height: 20px;
background: red;
margin: 5px;
}
</style>
</head>
<body>
<div id="elementsContainer">
<div class="myElement"></div>
<div class="myElement"></div>
</div>
<button id="addClassProperty">Add class property</button>
<button id="addNewElement">Add new element</button>
<script>
$("#addClassProperty").click(function(){
$(".myElement").css("background", "green");
});
$("#addNewElement").click(function(){
$("#elementsContainer").append("<div class='myElement'></div>");
});
</script>
</body>
</html>
El resultado esperado debería agregar una nueva propiedad a todos los elementos existentes y a cada elemento recién creado sin cambiar la propiedad para el elemento recién creado.
¿Hay alguna manera de solucionar este problema?
Copié tu código en un fragmento y cada elemento recién agregado agrega el estilo verde cuando haces clic en agregar clase...
-dale landry
27/03/2021 a las 18:06
@dalelandry haga lo siguiente: 1) agregue la propiedad de clase, 2) cree un nuevo elemento. El elemento recién agregado es rojo.
- Erupción J.
27/03/2021 a las 18:11
------------------------------------
Esto es mucho más simple agregando una clase al contenedor principal y una regla CSS correspondiente para .myElement cuando esa clase existe
$("#addClassProperty").click(function() {
$('#elementsContainer').addClass('active')
});
$("#addNewElement").click(function() {
$("#elementsContainer").append("<div class='myElement'></div>");
});
.myElement {
width: 20px;
height: 20px;
background: red;
margin: 5px;
}
.active .myElement {
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="elementsContainer">
<div class="myElement"></div>
<div class="myElement"></div>
</div>
<button id="addClassProperty">Add class property</button>
<button id="addNewElement">Add new element</button>
1
@freedomn-m Cambié el mío mientras escribías el tuyo y lo publiqué segundos antes que tú
- charlietfl
27/03/2021 a las 18:29
------------------------------------
En lugar de "cambiar propiedad de clase", desea cambiar/agregar una regla CSS.
EDITAR: mejor enlace --> Cambiar un conjunto de reglas CSS desde Javascript
O podrías tener una o varias clases con CSS existente y cambiar las clases de tus objetos en su lugar.
------------------------------------
Cuando aplica un color de fondo verde a los elementos, el estilo del color de fondo se ingresa en el atributo de estilo. Así es como funciona el método css(). Por lo tanto, cada nuevo elemento tiene un color de fondo rojo, tomado del CSS.
Para resolverteSi tienes algún problema, puedes usar el método para agregar una clase o cambiar el color de la regla de fondo en el propio CSS. Esto se puede hacer usando cssRules consultando el documento. Así:
[...document.styleSheets[0].cssRules].find((currentSel) => (currentSel.selectorText = ".myElement")).style.background = "green";
Colocando este código dentro del evento click del selector #addClassProperty.
$("#addClassProperty").click(function () {
[...document.styleSheets[0].cssRules].find((currentSel) => currentSel.selectorText = ".myElement").style.background = "green";
});
$("#addNewElement").click(function () {
$("#elementsContainer").append("<div class='myElement'></div>");
});
.myElement {
width: 20px;
height: 20px;
background: red;
margin: 5px;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<style></style>
</head>
<body>
<div id="elementsContainer">
<div class="myElement"></div>
<div class="myElement"></div>
</div>
<button id="addClassProperty">Add class property</button>
<button id="addNewElement">Add new element</button>
</body>
</html>
