Googleのポリマーを使用して、要素の幅を取得する方法

Question

非常に基本的なテクニックをお聞かせください。つまり、ポリマー要素の現在の幅を取得する方法です。私は次のコードを試しました。それはうまくいきませんでした。 Webブラウザ上で

テンプレート

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

高分子機能

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

、紙入力要素の幅は、ページと同じに見えます。

Answer 1

this.$.id1.clientWidthを使用できます。あなたは、その後も整数に値を丸めますあなた幅使用offsetWidth

clientWidthに含まれるようにしたい場合clientWidthは、パディングとボーダーは含まれません。分数値が必要な場合は、element.getBoundingClientRect（）を使用します。

this.$.id1.getBoundingClientRect().widthインラインスタイリングを使用している場合、this.$.id1.style.widthも機能します。

参考リンク：clientWidth offsetWidth getBoundingClientRect()