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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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