CODEWITHSUNDEEP
javascriptwidthcss
user2793354
user2793354

Reputation: 19

Find element's width, not maxwidth

How do I find the width of an element?

I have maxwidth set to 100px & width set to "auto". I'm attempting to find its exact width dynamically which could be <100px.

I tried these options: element.offSetWidth, element.style.width, created a region through Dom.getRegion & pulled width..

However, all the above options return 100px as width.

Any non-jquery based solution please?

-Vidi

Upvotes: 1

Views: 1613

Answers (4)

Torrent Lee
Torrent Lee

Reputation: 845

add a float or make it inline

<style type="text/css">
        #test_max_width{
            max-width : 100px;
            float:left;
        }
    </style>
    <div id="test_max_width">s</div>
    <input type="button" value="more" id="addcontent"/>
    <script type="text/javascript">
        var output = document.getElementById( "test_max_width" );
        document.getElementById( "addcontent" ).onclick= function  (  ) {
            output.innerHTML += output.innerHTML;
            console.log ( output.offsetWidth );
        };
    </script>

Upvotes: 0

Tregoreg
Tregoreg

Reputation: 22165

document.getElementById("id").clientWidth should work

Upvotes: 0

Ivan Lazarevic
Ivan Lazarevic

Reputation: 371

document.getElementById(ID_OF_ELEMENT).offsetWidth should work

Upvotes: 0

benesch
benesch

Reputation: 5269

offsetWidth really should work. Proof. Try resizing the "Result" window, and you'll see the div update in size.

document.getElementById("id").offsetWidth;

Make sure you use offsetWidth, not offSetWidth (note capitalization).

Upvotes: 5

Related Questions