4

Quiero obtener una propiedad de css en js para sumar su valor.

En el siguiente código tengo un div llamado bubble, y lo que quiero es aumentar su valor en scale(0.1) cada vez que se ejecute la funcion y la única manera que se me ocurre es obtener el valor del atributo scale() y sumarle el 0.1

Creo que hay otras soluciones pero no se me ocurre

function bubblestart(){
  document.getElementById("bubble").style.transform = "scale(1.5)";
}
<div class="button" onclick="bubblestart()">Start</div>
 <div id="bubble"></div>

2 respuestas 2

4

Si lo que quieres realmente es solo sumarle 0.1 (es 0.1 pixel? o quieres escalarle el 10%?). Yo lo interpreto como que quieres sumarle 0.1. Entonces no uses scale, porque scale() lo escala multiplicando y cuanto más grande, más crece.

Puedes usar esta solución:

var bubble = document.getElementById('bubble');

bubble.addEventListener('click', () => {
  var ancho = bubble.getBoundingClientRect().width,
      alto = bubble.getBoundingClientRect().height,
      escalarAncho = ancho + 0.1 + 'px',
      escalarAlto = alto + 0.1 + 'px';
      bubble.style.width = escalarAncho;
      bubble.style.height = escalarAlto;
      console.log(ancho + ' ' + alto +' dimensiones');
});
.bubble {
      position: relative;
      margin: 0 auto;
      transition: all .3s ease-out;
      width: 50px;
      height: 50px;
      background-color: red;
      border: 1px solid red;
      border-radius: 50%;
  cursor: pointer;
      }
<div id="bubble" class="bubble"></div>

Puedes jugar con los valores para hacerlo crecer. Puedes multiplicar por 0.1 para que crezca el 10%. Ahora, si lo que de verdad quieres es usar scale entonces, usa esta otra solución

var bubble = document.getElementById('bubble');

bubble.addEventListener('click', () => {
  var ancho = bubble.getBoundingClientRect().width,
      escalar = 'scale(' + ancho * 0.1 + ')';
      bubble.style.transform = escalar;
      console.log(ancho + ' es el ancho ahora');
});
.bubble {
      position: relative;
      margin: 0 auto;
      transition: all .3s ease-out;
      width: 50px;
      height: 50px;
      background-color: red;
      border: 1px solid red;
      border-radius: 50%;
  cursor: pointer;
      }
<div id="bubble" class="bubble"></div>

Suerte!

4

Una forma podria ser:

<div class="button" onclick="bubblestart()">Start</div>
<div id="bubble" data-scale="0.1"></div>

Defines un attribute con un valor por defecto. Luego tu javascript lee ese atributo, lo incrementa y guarda en el atributo. Tambien modificas la escala como necesites con ese valor:

function bubblestart(){
  bubble = document.getElementById("bubble");
  bubbleScale = +(bubble.getAttribute("scale")) + 0.1;
  bubble.style.transform = "scale("+bubbleScale+")";
  bubble.setAttribute("data-scale", bubbleScale);
}

Es una aproximacion, revisala para adaptarla a tu necesidad.

2
  • 2
    Hola Jakala, un snippet le daría a tu respuesta más valor, teniendo una representacion visual de cómo funciona. Un saludo ;)
    – lois6b
    el 10 oct. 2018 a las 10:43
  • Me aumenta al valor de bubbleScale pero al ejecutar la función otra vez, ya no aumenta.
    – Pelukosa
    el 10 oct. 2018 a las 11:12

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.