Get Element width without using append or adding to DOM as content has script tag

Question

Is there any way to compute element width without using append. I have a div inside a page and need to calculate its width it can have script tags in it.

<div> 
<script>
alert("Testing");
console.log("Duplicate");
</script> 
</div>

I have a page that loads some data through ajax call. Before adding that data on page, I have to do modification in JS (ex: fetching and modifying width of parent according to child(above div) ).

Using append resulted in script execution without actually being loaded on page. PS: use display and visibility, didn't worked here.

Using [Google](https://www.google.com/search?q=javascript+get+element+width) usually helps — Can O' Spam, Dec 22 '22 at 09:57
checked already; saw solutions using display:none and visibility:hidden; it didn't worked. — Bhavana, Dec 22 '22 at 10:06
What are you searching for? I have never heard about getting the width using append, display or visibility — Can O' Spam, Dec 22 '22 at 10:08
However - the second result from my search (linked in my first comment), is an SO question (that this is frankly a dupe of) explaining how to get element width ([link to said question](https://stackoverflow.com/questions/294250/how-do-i-retrieve-an-html-elements-actual-width-and-height)) — Can O' Spam, Dec 22 '22 at 10:09
Link you have share have elements already added in page. I am performing some modification in JS before adding them in form. — Bhavana, Dec 22 '22 at 10:50
I hope this will help. https://stackoverflow.com/questions/294250/how-do-i-retrieve-an-html-elements-actual-width-and-height — Muthulakshmi M, Dec 22 '22 at 12:58
@MuthulakshmiM : So I imagine that my answer was appropriate. — tatactic, Dec 22 '22 at 13:08
@MuthulakshmiM - please make sure when you post a link it's not already been posted - I linked it above in (at time of typing) the 4th comment :) — Can O' Spam, Dec 22 '22 at 14:41
@tatactic - to an extent I imagine not, OP has indicated they used this method already but manipulate it, to which end some form of timeout to let DOM catch up and then a use of the method would be most appropriate — Can O' Spam, Dec 22 '22 at 14:42

tatactic · Answer 1 · 2022-12-22T12:30:49.490

You can use offsetWidth to retrieve the width from an element. Ex :

    window.addEventListener("DOMContentLoaded",getElementWidth);
        function getElementWidth(){
            let el = document.getElementById("myDiv");
            let dsp = document.getElementById("myDisplay");
            let wdt = "width of “Div N°1”  = " + el.offsetWidth + "px";
            dsp.innerHTML = wdt;
        }

        #myDiv{
            width : 400px;
            padding:20px;
            margin-left:auto;
            margin-right:auto;
            margin-bottom:20px;
            border:10px solid #000000;
        }

    <div id="myDiv">
        Div N°1
        <script>
            //alert("Testing");
            console.log("Duplicate");
        </script>
    </div>
    <div id="myDisplay"></div>

Please just let me know if it's suitable for your needs because I'm not sure to understand your question. It was written before your edits. Have a nice day.

Get Element width without using append or adding to DOM as content has script tag

1 Answers1