How can I change sizes in pixels of a div and all its child elements?

I'm trying to perform something like a zoom or scale function but I need to be able to retrieve the new top, left, width and height values in pixels.

I tried scale and visually it transformed everything in the div but when I checked the computed styles they were unchanged.

How can I scale a div and all it's child elements, then in javascript retrieve all the new position and dimension style values specifically in pixels?

 

I've got it: getBoundingClientRect works fine.

 

To change the pixel size of ` div ` and all its child elements, you can use CSS's ` transform ` property. By setting the 'scale' value, the entire 'div' can be uniformly scaled. For example, use the following code:
```css
div {
transform: scale(1.5); /*Magnify 1.5 times*/
transform-origin: top left; /*Set zoom base point*/
}
```
In addition, properties such as' font size 'and' padding 'can be adjusted to ensure that the text and margins also change accordingly. In this way, the size of ` div ` and its child elements will be adjusted as a whole.
Photos To Photos creates fast ID photos and avatars

 

To change the pixel size of ` div ` and all its child elements, you can use CSS's ` transform ` property. By setting the 'scale' value, the entire 'div' can be uniformly scaled. For example, use the following code:
```css
div {
transform: scale(1.5); /*Magnify 1.5 times*/
transform-origin: top left; /*Set zoom base point*/
}
```
In addition, properties such as' font size 'and' padding 'can be adjusted to ensure that the text and margins also change accordingly. In this way, the size of ` div ` and its child elements will be adjusted as a whole.
Photos To Photos creates fast ID photos and avatars
https://photostophotos.net/