{"id":18,"date":"2024-11-16T22:38:09","date_gmt":"2024-11-16T22:38:09","guid":{"rendered":"https:\/\/programming.rexthestrange.com\/?p=18"},"modified":"2024-11-16T22:38:35","modified_gmt":"2024-11-16T22:38:35","slug":"how-big","status":"publish","type":"post","link":"https:\/\/programming.rexthestrange.com\/?p=18","title":{"rendered":"How Big?"},"content":{"rendered":"\n<p>clientWidth = width + padding<\/p>\n\n\n\n<p>clientHeight = height + padding<\/p>\n\n\n\n<p>offsetWidth = width + padding + border<\/p>\n\n\n\n<p>offsetHeight = height + padding + border<\/p>\n\n\n\n<p>totalWidth = width + padding + border + margin<\/p>\n\n\n\n<p>Use the following prototype definition:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Object.defineProperties (HTMLElement.prototype, {\ntotalWidth: {\nget: function (): number { \nlet style = window.getComputedStyle (this);\nreturn this.offsetWidth + parseInt (style.marginLeft) + parseInt (style.marginRight)\n}\n}\n});\n<\/code><\/pre>\n\n\n\n<p>totalHeight = height + padding + border + margin<\/p>\n\n\n\n<p>Use the following prototype definition:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Object.defineProperties (HTMLElement.prototype, {\ntotalHeight: {\nget: function (): number { \nlet style = window.getComputedStyle (this);\nreturn this.offsetHeight + parseInt (style.marginTop) + parseInt (style.marginBottom)\n}\n}\n});\n<\/code><\/pre>\n\n\n\n<p>clientTop = top &#8211; (border + padding)<\/p>\n\n\n\n<p>clientLeft = left &#8211; (border + padding)<\/p>\n\n\n\n<p>offsetTop = top &#8211; (margin + border + padding)<\/p>\n\n\n\n<p>offsetLeft = left &#8211; (margin + border + padding)<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>clientWidth = width + padding clientHeight = height + padding offsetWidth = width + padding + border offsetHeight = height + padding + border totalWidth = width + padding + border + margin Use the following prototype definition: totalHeight = height + padding + border + margin Use the following prototype definition: clientTop = top [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-18","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/programming.rexthestrange.com\/index.php?rest_route=\/wp\/v2\/posts\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programming.rexthestrange.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programming.rexthestrange.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programming.rexthestrange.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/programming.rexthestrange.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=18"}],"version-history":[{"count":2,"href":"https:\/\/programming.rexthestrange.com\/index.php?rest_route=\/wp\/v2\/posts\/18\/revisions"}],"predecessor-version":[{"id":20,"href":"https:\/\/programming.rexthestrange.com\/index.php?rest_route=\/wp\/v2\/posts\/18\/revisions\/20"}],"wp:attachment":[{"href":"https:\/\/programming.rexthestrange.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=18"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programming.rexthestrange.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=18"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programming.rexthestrange.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}