DOMを使ってstyle.topを取得する方法はありますか？

Question

私はtestBoxのIDを持つdivの指定：ヘッド部で

<div id="testBox"></div> 

とスタイル、それを：本体の底部に、その後

#testBox { 
     background: red; 
     width: 25px; 
     height: 25px; 
     left: 0; 
     top: 0; 
      } 

を、私はJSを置く：

var box = document.getElementById("testBox"); 
     console.log(box.style.left); 
     console.log(box.style.width); 

はFirefoxで放火犯を使用しますが、それはちょうど私に言う：

それは空の文字列です....

しかし、私はこのようにdivタグにスタイルのINFOMATIONを置くとき：その後、JSは、その作業を行うことができ

<div id="testBox" style="background: red;width: 25px;height: 25px;"></div> 

を、すべての情報を取得するI ....ので、これはそれがすべてのインライン聖霊降臨祭、または私はちょうどすべての後、私はJSとDOMにちょうど新しいです、何かを欠場スタイル情報を取得する唯一の方法である

をしたい

Answer 1

yとou say box.id返される内容は、htmlで宣言されているボックス要素の属性idです。

box.styleと言うときは、マークアップに基づいて作成されたjavascriptオブジェクトにもアクセスしています。

スタイル属性のDOM表現が作成されるときに、インラインで定義されていないスタイル属性は使用されません。

articleは、この動作を強調しています。あなたはjQueryのようなライブラリを使用する場合

ただし、

$(function(){alert($("#textBox").css("width"));}); 

を行うことができ、これはあなたのCSSの値が得られます。

UPDATE：正しい方向に私を指しているためAVDに

ありがとう：

ここ

var box = document.getElementById("testBox"); 
var style = window.getComputedStyle ? window.getComputedStyle(box) : box.currentStyle; 

alert("Height : " + style["height"]); 
alert("Width : " + style["width"]); 
alert("Left : " + style["left"]); 

がある：ここでは は彼のソリューションを使用していますが、9 IE <のサポートを追加する方法であり、 fiddle。

Answer 2

getComputedStyle()をお試しください。これは、要素のすべてのCSSプロパティの最終使用値を返します。

var box = document.getElementById("testBox"); 
var style=window.getComputedStyle(box); 
console.log("Height : " + style["height"]); 
console.log("Width : " + style["width"]); 
console.log("Left : " + style["left"]);