javascript - CSS で定義された要素の幅を em で取得する

Question

CSS で定義された要素の幅を取得できません。JavaScript を使用して CSS ルールを取得する方法はわかりましたが、幅にアクセスできません。メニューは CSS でemを使用して定義した固定幅です。

ブラウザ ウィンドウから固定メニュー幅を引いた値に基づいてdiv1の幅を変更しようとしています。

注：すでに を使用してみstyle.widthましたが、コンソールに空白行が返されます。

jsfiddle: http://jsfiddle.net/kj6pQ/

var div1 = document.createElement('div'), 
css = getMatchedCSSRules(document.getElementById('menu'));

console.log(css); //works but dont' konw how to access width

div1.style.width = window.innerWidth - <!-- menu width -->;

Answer 1

' offsetWidth' を使用してメニューの幅にアクセスします

var div1 = document.createElement('div'), 
css = document.getElementById('menu').offsetWidth;

console.log(css);
div1.style.width = css + "px";

Answer 2

getComputedStyleを使用します。

var css = document.getElementById('menu');

console.log(window.getComputedStyle(css).width);​

http://jsfiddle.net/kj6pQ/6/

Answer 3

この方法を試してください：

var width = window.getComputedStyle(document.getElementById("menu"), null).getPropertyValue("width");