脱jQuery .height() .width() .offset() .scrollTop()

.height()（高さ設定）

jQuery

$("#main").height(50)

書き換え JavaScript

document.getElementById("main").style.height = "50px"

.css() と考え方は同じです。「高さ」を設定するので style を使います。JavaScript の方は "50px" と「px」の単位が入っていることに気をつけます。jQuery の方はあっても無くても自動でやってくれますが、ネイティブの方はしっかり書かなくてはいけません。

参考：.css()の書き換え

先程も書きましたが高さの取得に関しては次回説明します。

.width()（幅設定）

jQuery

$("#main").width(50)

書き換え JavaScript

document.getElementById("main").style.width = "50px"

.height() と全く考え方は同じです。こちらも単位の「px」を忘れないようにしましょう。

.offset()（top 値を取得）

jQuery

var myTop = $("#main").offset().top

書き換え JavaScript

var myMain = document.getElementById("main");
var rect = myMain.getBoundingClientRect();
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
var myTop = rect.top + scrollTop;

ものすごく複雑です。myTop に「top 位置」が入ります。

offsetは画面の左上からの距離を取得しますが、それを一発で出す命令は存在しないので、難しい計算をします。jQuery もほぼこのようなコードで動いています。

.offset()（left 値を取得）

jQuery

var myLeft = $("#main").offset().left

書き換え JavaScript

var myMain = document.getElementById("main");
var rect = myMain.getBoundingClientRect();
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
var myLeft = rect.left + scrollLeft;

今度は left 値の取得です。myLeft に値が入ります。先ほどと流れは変わりません。もう少し簡単にできればいのですが状況によって色々取り方がありますので万能なのはこの方法になります。

.offset()（値を設定）

jQuery

$("#main").offset({top: 100, left: 200})

書き換え JavaScript

var myMain = document.getElementById("main");
myMain.style.top = "100px";
myMain.style.left = "200px";

myMain が position:relative か position:absolute か position:fixed になっている必要があります。jQuery は自動でその辺をやってくれますが、ネイティブはもしそうでない場合 CSS 等で設定してください。

CSS の設定の仕方と同じです。ここでも単位の「px」が入ることを忘れないようにしてください。

.scrollTop()（値を取得）

jQuery

var scrollTop = $(window).scroll()

書き換え JavaScript

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

ブラウザにより多少動きが異なるため書き方が複雑になってます。scrollTop に現在のスクロール位置が入ります。

window に対して行うことが多いはずですので window のスクロール値のみ扱います。

.scrollTop()（値を設定）

jQuery

$(window).scrollTop(300)

書き換え JavaScript

window.scrollTo(0, 300)

ネイティブの方は（0,300）と0が入っていますが、これはスクロールの X 座標を表すものです。ウィンドウに対して X 座標のスクロールはあまりしませんので、通常は常に0のままで大丈夫です。

と、このように位置関連に関してはネイティブはかなりまどろっこしい部分があります。

ネイティブだけで書いていくのはこれだけ見ると結構きついですが、目的を持って一つ一つ調べて取得や設定ししていけばなんとかなるものがほとんどです。ただ、jQuery はこのまどろっこしさを吸収してくれてやってくれますので便利だな、と思うわけです。

まとめ