
スキルアップ
2021.01.08
社会人の勉強は何をするべき?勉強のメリットと勉強方法も紹介!
社会人になっても勉強は必要!と言われても、何を勉強したら良いのか迷いますよね。仕事に関わるスキルを磨いたり、資格を取得したりする他にも、勉強できることはたくさんあります。ここでは、社会人が勉強するメリット、オススメの勉強 […]
jQuery
2018.11.09
jQuery の offset メソッドを使用すると、HTML 要素の表示位置を座標で取得したり、設定したりすることができます。
今回は、jQuery の offset メソッドの使い方について紹介します。
1.offset メソッド
2.offset で表示位置座標を取得
3.offset で表示位置座標を設定(相対位置)
offset メソッドは、引数によって 3 通りの記述方法があります。
$(セレクタ).offset( );
$(セレクタ).offset( coordinates );
$(セレクタ).offset( function( index, coords ) );
offset メソッドの引数の内容は、それぞれ以下の通りです。
.offset( coordinates )
coordinates top と left プロパティを含むオブジェクトを指定
.offset( function( index, coords ) )
function( index, coords ) 設定される座標を返す関数を指定
index:要素のインデックス番号
coords:変更前の位置を表すオブジェクト
offset メソッドを使用して、ボックスの左上頂点の座標を取得して表示します。
紺色のボックス内をクリックしてみて下さい。
x 座標:
y 座標:
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#div1").on("click", function() { var os = $("#div1").offset(); $("#spn1").text(os.left); $("#spn2").text(os.top); }); }); //--> </script> <div style="background-color:#CCC; padding:20px 20px 10px;"> <div id="div1" style="background-color:navy; width:100px; height:100px;"> </div> x 座標:<span id="spn1"></span> y 座標:<span id="spn2"></span> </div>
「 $(“#div1”).offset(); 」のように記述して、ボックス(id 名が div1 の div 要素)の左上の頂点の x 座標(左端からの距離)と y 座標(上端からの距離)を取得しています。
因みに、右端や下端からの距離は取得できません。
offset メソッドを使用して、表示位置の座標を設定して移動させます。
朱色のボックス内をクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#div2").on("click", function() { var obj = {}; obj.left = $("#div2").offset().left; obj.left += 50; obj.top = $("#div2").offset().top; obj.top += 20; $("#div2").offset(obj); }); }); //--> </script> <div style="background-color:#CCC; padding:20px;"> <div id="div2" style="background-color:#EF454A; width:100px; height:100px;"> </div> </div>
例えば、「 $(“#div2”).offset({top:3000, left:200}); 」のように記述すると ボックス(id 名が div2 の div 要素)を、左上の頂点の x 座標(左端からの距離)が 200px 、y 座標(上端からの距離)が 3000px の位置に移動させることができますが、上のサンプルでは現在の位置からの相対的な座標を設定しています。
上のサンプルでは、次のように記述して現在の位置からの相対的な座標を設定しています。
// オブジェクトobjの宣言 var obj = {}; // 現在位置のx座標をobjに代入 obj.left = $("#div2").offset().left; // 相対位置のx座標をobjに代入 //(右へ50px移動) obj.left += 50; // 現在位置のy座標をobjに代入 obj.top = $("#div2").offset().top; // 相対位置のy座標をobjに代入 //(下へ20px移動) obj.top += 20; // 相対位置が格納されたobjを設定 $("#div2").offset(obj);
相対位置の設定は ソースコードの記述が多少煩雑になりますが、使用するデバイスやブラウザによる位置のずれ等を回避することができます。
スキルアップ
2021.01.08
社会人になっても勉強は必要!と言われても、何を勉強したら良いのか迷いますよね。仕事に関わるスキルを磨いたり、資格を取得したりする他にも、勉強できることはたくさんあります。ここでは、社会人が勉強するメリット、オススメの勉強 […]
スキルアップ
2021.01.08
独学でフリーランスエンジニアを目指す方へ向けて、未経験からフリーランスエンジニアになるための手順や独学でのプログラミング学習法、必要なスキルなどをご紹介します。 独学とスクールどちらで勉強すればいいか迷っている、そもそも […]
スキルアップ
2021.01.05
高卒女子の就職内定率は大卒女子とほぼ同じ。でも知恵袋には「高卒女性が応募できる正社員求人って少ないのでは…?」と心配する人たちもいるようですが、資格なしでも高収入が期待できる仕事はたくさんあります。そこで今回は現役女子高 […]
スキルアップ
2020.12.30
プログラマの仕事に興味はあるものの「プログラマの仕事はきつい」というのを耳にして不安に思ったりしていませんか?なぜプログラマの仕事はきついといわれるのか?そもそも未経験からでもプログラマになれるのか?本記事では、プログラ […]
スキルアップ
2020.12.21
技術の進歩に伴い、IT業界も人気の業界のひとつとなりましたが、「IT業界はブラック企業が多いからエンジニアを目指すのはやめとけ」という声も聞こえてきます。これは本当なのでしょうか?この記事では、実際の疑問の声に対する理由 […]
スキルアップ
2020.12.18
仕事にやりがいを感じられず悩んではいませんか?本記事では、仕事で満足感を得るにはどうすればいいのか、やりがいの感じやすいお仕事7選、仕事にやりがいを見つけるポイント、転職しなくても仕事の満足度をあげる方法などをご紹介しま […]
INTERNOUS,inc. All rights reserved.