I want to get a css property in js to add its value.
In the following code I have a div called bubble, and what I want is to increase its value by scale(0.1) every time the function is executed and the only way I can think of is to get the value of the scale() attribute and add the 0.1
I think there are other solutions but I can't think of
function bubblestart(){
document.getElementById("bubble").style.transform = "scale(1.5)";
}
<div class="button" onclick="bubblestart()">Start</div>
<div id="bubble"></div>
One way could be:
You define an attribute with a default value. Then your javascript reads that attribute, increments it, and saves to the attribute. You also modify the scale as needed with that value:
It is an approximation, review it to adapt it to your needs.
If what you really want is just to add 0.1 to it (is it 0.1 pixel? or do you want to scale it by 10%?). I interpret it as you want to add 0.1 to it. So don't use scale, because scale() scales it by multiplying and the bigger it gets, the bigger it grows.
You can use this solution:
You can play with the values to make it grow. You can multiply by 0.1 so that it grows 10%. Now if you really want to use scale then use this other solution
Luck!