[Gambas-user] getting real web object sizes

Sun Aug 7 15:04:46 CEST 2022

 <https://stackoverflow.com/posts/35505821/timeline>

It would be useful to get/convert dimensions of some things in pixels from
css

especially with WebDrawingarea otherwise it is going to be fairly essential
to only use px values.

There are apparently various methods to do it.

Below is some useful info from a page I found on it.

I have not tested the method below using em or % css sizes (shame the test
used px)

Respects

BruceS

Quote from page @
https://stackoverflow.com/questions/294250/how-do-i-retrieve-an-html-elements-actual-width-and-height

Just in case it is useful to anyone, I put a textbox, button and div all
with the same css:

width:200px;
height:20px;
border:solid 1px #000;
padding:2px;

<input id="t" type="text" />
<input id="b" type="button" />
<div   id="d"></div>

I tried it in chrome, firefox and ie-edge, I tried with jquery and without,
and I tried it with and without box-sizing:border-box. Always with <!DOCTYPE
html>

The results:

                                                               Firefox
      Chrome        IE-Edge
                                                              with
w/o    with   w/o    with   w/o     box-sizing

$("#t").width()                                               194
200    194    200    194    200
$("#b").width()                                               194
194    194    194    194    194
$("#d").width()                                               194
200    194    200    194    200

$("#t").outerWidth()                                          200
206    200    206    200    206
$("#b").outerWidth()                                          200
200    200    200    200    200
$("#d").outerWidth()                                          200
206    200    206    200    206

$("#t").innerWidth()                                          198
204    198    204    198    204
$("#b").innerWidth()                                          198
198    198    198    198    198
$("#d").innerWidth()                                          198
204    198    204    198    204

$("#t").css('width')                                          200px
200px  200px  200px  200px  200px
$("#b").css('width')                                          200px
200px  200px  200px  200px  200px
$("#d").css('width')                                          200px
200px  200px  200px  200px  200px

$("#t").css('border-left-width')                              1px
1px    1px    1px    1px    1px
$("#b").css('border-left-width')                              1px
1px    1px    1px    1px    1px
$("#d").css('border-left-width')                              1px
1px    1px    1px    1px    1px

$("#t").css('padding-left')                                   2px
2px    2px    2px    2px    2px
$("#b").css('padding-left')                                   2px
2px    2px    2px    2px    2px
$("#d").css('padding-left')                                   2px
2px    2px    2px    2px    2px
document.getElementById("t").getBoundingClientRect().width    200
206    200    206    200
206document.getElementById("b").getBoundingClientRect().width    200
 200    200    200    200
200document.getElementById("d").getBoundingClientRect().width    200
 206    200    206    200    206
document.getElementById("t").offsetWidth                      200
206    200    206    200
206document.getElementById("b").offsetWidth                      200
 200    200    200    200
200document.getElementById("d").offsetWidth                      200
 206    200    206    200    206
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.gambas-basic.org/pipermail/user/attachments/20220807/f88640f1/attachment-0001.htm>