質問: (ev.clientY-25)+'px'; },false); ``` ``` // ↓ css p{ padding-left: 60px; } #foo{ border-radius: 50px; width: 50px; height: 50px; background: #343838; position: absolute; top: 0; left: 0; transition: all 1s; } ``` ### 試したこと 最初はコンテンツツリーが読み込まれて無いのかな?と素人ながら考え、 DOMContentLoaded も試してみたのですが、同じようにstyle null が表示され サンプルコード http://jsfiddle.net/RwtHn/5/ をコピペしてみましたが 結局同じでした。 ### 補足情報(言語/FW/ツール等のバージョンなど) ブラウザ Google Chrome バージョン 52.0.2743.116 m (64-bit) テキストエディタ notepad++ です。
回答: > > var f = document.getElementById('foo'); > > > この処理が実行されるとき、まだdiv#fooは読み込まれていませんので、要素を参照することができません。 > > コンテンツツリーが読み込まれて無いのかな? > > > まさにこれです。スクリプトを変えずに対応する場合は、 ``` クリックしてね ``` このように対象の要素より後にscript要素を移動してください。また、 > > DOMContentLoaded も試してみた > > > これも対処の1つで、実際どのように記述されたかはわかりませんが、 ``` ``` このように全体を囲う形にしたでしょうか?これであればscript要素は元の位置で問題無いかと思います。 なお、参考にされたjsfiddleは、元々JavaScriptの動作をonloadに設定してある(JavaScriptペインの右上の歯車のマークから実行タイミングを設定できます)ため、自らwindow.onload~などなどをせずとも、問題なく動作するようになっています。