jQuery.innerWidthでDOMに突っ込む前の要素を調べるとブラウザごとに帰ってくる数値が違う

CSSで指定した値が入ってくるかと思っていたのですが...。

ul {
  padding-left: 77px;
}

というCSSがあったとして

$('<ul />').innerWidth();

上のJSのjQuery.innerWidthの返り値は下の表のようにブラウザごとに違います。

Browser	value
IE	40
Firefox	77
Safari/Chrome	0

IEではブラウザデフォルトCSS、Firefoxでは指定したしたCSS、safari/ChromeではそもそもCSSがあたっていないように観られます。

原因をもう少し深く追ってみましょう。

jQuery.innerWidthは内部ではoffsetWidthの値から左右のボーダー幅を取り除いた数値を返すか、offsetWidthの値が0の場合、左右のpaddingを足し合わせた数値を返すようになっています。

DOMに挿入されていない要素のoffsetWidthの値は0になるので、左右のpaddingを取得しているのですがこのときwindow.getComputedStyle（古いIEではHTMLElement.currentStyle）を使用してを取得しています。

そして、window.getComputedStyleで返却されるCSSStyleDeclarationオブジェクトのプロパティの値の仕様がDOM上にない場合それぞれのブラウザで違うことが原因となっているようです。

DOM上にない要素に対してこのような処理を行う場合は注意が必要みたいです。