JavaScriptからインラインブロックフィールドセットの表示幅を取得する方法

Question

display：inline-blockのフィールドセットを持つ場合、そのフィールドに含まれる要素に応じた幅があります。あなたはそれを参照してください、しかし、と仮定することができます

<fieldset id='fs' style='display: inline-block'> 
    <input type=number> 
</fieldset> 

<script> 
    var fs=document.getElementById("fs"); 
    console.log("fs.width:",fs.width); 
</script> 

を唯一の出力は次のようになります。

fs.width: undefined 

私は最終的に、このようにそれを得ることができた多くのことを試した後：

<script> 
    var fs=document.getElementById("fs"); 
    var fsrects=fs.getClientRects(); 
    var fswidth=fsrects[0].right-fsrects[0].left; 
    console.log("fswidth:",fswidth); 
</script> 

であり、出力は

fswidth: 98.6640625 

Tここは簡単な方法でなければなりません！助けて！！！

Answer 1

あなたはおそらくoffsetWidthを探しています。

HTMLElement.offsetWidth読み取り専用プロパティは、要素のレイアウト幅を返します。通常、要素のoffsetWidthは、要素境界線、要素水平パディング、要素垂直スクロールバー（存在する場合）、要素CSS幅を含む測定値です。

var fs=document.getElementById("fs"); 
 
    console.log("fs.width:",fs.offsetWidth);

<fieldset id='fs' style='display: inline-block'> 
 
    <input type=number> 
 
</fieldset>