CODEWITHSUNDEEP
javascriptcsspolymer
yuzu
yuzu

Reputation: 79

Using google polymer, how to get the width of an element

Please let me ask a very elementary technique. Namely how to get the current width of a polymer element. I tried the following code. Howerver it did not work.

template

    <template> 
    <paper-input id="id1"></paper-input>
    <button on-tap="ontap">ontap</button>
    </template>

polymer function

   ontap:function(){alert (this.$.id1.width);}

On the web browser, the width of the paper-input element looks same as the page.

Upvotes: 1

Views: 877

Answers (1)

a1626
a1626

Reputation: 2964

You can use this.$.id1.clientWidth. clientWidth will not include padding and border if you want then also to be included in your width use offsetWidth

clientWidth will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().

this.$.id1.getBoundingClientRect().width In case you are using inline styling then this.$.id1.style.width will also work.

Reference links: clientWidth offsetWidth getBoundingClientRect()

Upvotes: 1

Related Questions