jQuery(Javascript)を使ってある HTML 要素の margin-top を取得するときは、ブラウザによって返される値が違う可能性があるので注意が必要です。具体的にその違いを確認することができるコードを下記に示します。
id「hoge」が指定された要素のmargin-topを取得してalertで表示します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ alert($('#hoge').css('margin-top')); //ここで表示される値がブラウザで違います }); </script> <style type="text/css"> #hoge{ width: 100px; height: 100px; background: #cccccc; } </style> </head> <body> <div id="hoge"></div> </body> </html> |
各ブラウザで実行した結果は下記のようになります。
Chrome最新版: 0px
Firefox最新版: 0px
IE6: auto
IE7: auto
IE8: auto
計算に使う場合はIEでうまくいきませんので注意してください。これを回避するには、下記のように計算に使う前に予め初期化しておくと良いです。
|
1 2 3 4 5 |
$(function(){ $('#hoge').css('margin-top', 0); alert($('#hoge').css('margin-top')); }); |