0

Me guastaría saber si se puede hacer algo así con JQuery o JS:

.clase1, .clase2
{
    width:500px;
    height:300px;
}

El tema es que la clase1 no fue declarada en CSS. Fue declarada con JQuery así:

 $(".clase1").css("width","500px");
 $(".clase1").css("height","300px");

Y me gustaría copiar todos sus valores a otra. Es decir, sé que se puede hacer esto:

w = $(".clase1").css("width");
$(".clase2").css("width",w);

Pero no lo veo muy práctico... la pregunta es si se puede copiar todas las propiedades de una vez sin tener que ir copiando propiedad por propiedad.

4
  • 3
    Podrías echarle un vistazo a la función getComputedStyle() developer.mozilla.org/en-US/docs/Web/API/Window/…
    – phpMyGuel
    el 30 ene. 2019 a las 13:48
  • Muchas gracias @PHPMyguel. Tiene buena pinta... creo que me va a servir.. voy a probarlo!! el 30 ene. 2019 a las 13:51
  • 1
    ¿El archivo .css no está a tu alcance para poder editarlo, agregando .clase1 ?
    – A. Cedano
    el 30 ene. 2019 a las 14:07
  • Si lo tengo, pero no me sirve. Lo que pasa es que necesito hacer varias instancias de un objeto y precisamente lo quiero hacer dínamico para no tener que hacer un archivo .css y otro .js para cada objeto. Los objetos no pueen tener el mismo nombre de clase... a ver si puedo hacer algo general que me funcione para las dos instancias... el 30 ene. 2019 a las 14:40

1 respuesta 1

1

Como te comentan por ahí arriba, puedes utilizar window.getComputedStyle() para recoger las propiedades y valores de los estilos de un elemento. Aquí tienes un par de métodos que te pueden solucionar el problema y cómo utilizarlos:

/**
 * @param {Element} el Elemento html único
 */
const GetStyles = el => {
    const styles = window.getComputedStyle(el);
    const rules = [];
    for(let style of styles){
        rules.push({
            [style]: styles.getPropertyValue(style)
        });
    }
    return rules;
};

/**
 * @param {string} selector Selector, pej: #midiv, .miclase
 * @param {Array} rules Array generado por GetStyles()
 */
const ApplyStyles = (selector, rules) => {
    document.querySelectorAll(selector).forEach(el => {
        rules.forEach(rule => {
	    for( let [key, value] of Object.entries(rule) ){
                el.style[key] = value;
	    }
        });
    });
};

// añadimos algunos divs vacíos
for( let i = 0; i < 50; i++ ){
    document.body.innerHTML += '<div></div>';
}

// recogemos los estilos de div.class1
const rules = GetStyles(document.querySelector('.class1'));

// aplicamos los estilos al resto de divs
ApplyStyles('div:not(.class1)', rules);
.class1 { display: inline-block; width: 10px; height: 10px; background: red; margin: 10px; }
<div class="class1"></div>

jsFiddle

1
  • Awesome!! Muchas gracias @jsFiddle el 30 ene. 2019 a las 16:52

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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