学習JS - 私の要素は、私は自分のWebページに苦しんだ

任意のスタイルを持っていないなぜあなたは、コードの最後の行に注意している場合学習JS - 私の要素は、私は自分のWebページに苦しんだ

document.getElementById("btn").addEventListener("click", function(){ 
 
    var g = document.getElementById("guitar"); 
 
    console.log("Styles:", g.style.left,g.style.top, g.style.width,g.style.height, g.style.background); 
 
});

<html> 
 
    <head> 
 
     <style> 
 
    
 
     .stage { 
 
    \t position:relative; width:400px;height:300px;background:brown; 
 
     } 
 
    
 
     .guitar { 
 
    \t position:absolute;  \t left:20px;  \t top:10px;  \t width:150px;  \t height:150px;  \t background:#f63f63; 
 
     } 
 
    
 
     </style> 
 
    </head> 
 
    <body> 
 
    
 
     <input type="button" id="btn" value="Do something" /> 
 
    
 
     <div class="stage" id="stage"> 
 
     <div class="guitar" id="guitar" /> 
 
     </div> 
 
    <body> 
 
    </html>

、私はを参照していますギターのためのg（私は悪い命名法などを知っています、私はちょうどここでうんざりしています）。

gに時計を入れてプロパティを展開してスタイルに移動すると、何もありません（スタイルのリストに値はありません）。バックグラウンドでさえ空の値を示しますが、HTMLでは正しく表示されます。

ウォッチウィンドウの値が表示されないのはなぜですか？

出典

2016-08-02 MyDaftQuestions

@MyDaftQuestions ** ** fuction **は含まれていません。関連していない**すべての**コードを取り除くだけで、機能の本体を削除するのではなく、呼び出しを残してください。あなたの質問を修正しました。実際に実行される最小限の**完全な例が含まれていますが、あなたが投稿した状態では、あなたの質問は閉じられていたはずです。 – meagar