[Laravel 6.x]Route::get()で設定したURLパラメーターの取得
Laravel6.xでRoute::get('/path/to/{id}')で設定したidの取得方法について。
HOME > リファレンス > jQuery > jQuery API一覧 > jQuery CSS > .offset()
.offset()
戻り値
- Object
- top、leftプロパティをもつオブジェクト。
jQueryオブジェクトが持つ最初のDOM要素(indexが0のもの)のDocumentからの位置を取得する。
サンプル
実行結果
Javascript
- $('.jqTest .execute').toggle(function(){
- $(this).val('End');
- $('body').bind('click.jqTest', function(e){
- $(e.target).css({ border: '2px solid #990000'});
- alert('left:' + $(e.target).offset().left + ' | top:' + $(e.target).offset().top);
- });
- }, function(){
- $('body').unbind('.jqTest');
- $(this).val('Start');
- });
HTML
- <div class="jqTest">
- <input type="button" value="Start" class="execute cq-btn m-primary" />
- </div>
offset()は非表示要素は取得できない。公式ではbodyに設定されたborder、padding、marginは考慮されないっぽい雰囲気のことが書いてあるけど border以外は考慮されるみたい。ちゃんと空気読めてないかも。@todo で。
サンプル
実行結果
Javascript
- $('.jqTest2 .execute').toggle(function(){
- $(this).val('End');
- $('body').css({
- border: '50px solid #000000',
- padding: '50px',
- margin: '50px'
- });
- $('body').bind('click.jqTest2', function(e){
- $(e.target).css({ border: '2px solid #990000'});
- alert('left:' + $(e.target).offset().left + ' | top:' + $(e.target).offset().top);
- });
- }, function(){
- $('body').unbind('.jqTest2');
- $(this).val('Start');
- });
HTML
- <div class="jqTest2">
- <input type="button" value="Start" class="execute" />
- </div>
.offset( coordinates )
引数
- (object)coordinates
- top、leftプロパティをもつオブジェクト。
jQueryオブジェクトが持つDOM要素にcoordinatesを設定できる。
サンプル
実行結果
Javascript
- $('.jqTest3 .execute').toggle(function(){
- $(this).val('End');
- $('body').bind('click.jqTest3', function(e){
- $(e.target).offset({left: 20, top: 20});
- });
- }, function(){
- $('body').unbind('.jqTest3');
- $(this).val('Start');
- });
HTML
- <div class="jqTest3">
- <input type="button" value="Start" class="execute" />
- </div>
.offset( function(index, coords) )
引数
- (int)index
- インデックス
- (object)coords
- top、leftプロパティをもつオブジェクト。
関数を渡して設定することもできる。
サンプル
Startクリック後、このページの要素をクリックすると20pxずつ移動する。
実行結果
Javascript
- $('.jqTest4 .execute').toggle(function(){
- $(this).val('End');
- $('body').bind('click.jqTest4', function(e){
- $(e.target).offset(function(index, coords){
- if ($(this).data('coods')) {
- $(this).addClass('jqTest4Active');
- } else {
- $(this).addClass('jqTest4Active').data('coods', coords);
- }
- return {left: coords.left + 20, top: coords.top + 20}
- });
- });
- }, function(){
- $('.jqTest4Active').offset(function(index, coords){
- $(this).removeClass('jqTest4Active');
- return {left: $(this).data('coods').left, top: $(this).data('coods').top}
- });
- $('body').unbind('.jqTest4');
- $(this).val('Start');
- });
HTML
- <div class="jqTest4">
- <input type="button" value="Start" class="execute" />
- </div>