yuzu yuzu - 5 months ago 100
CSS Question

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.

Answer

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()

Comments