
スキルアップ
2021.04.15
社会人におすすめなプログラミングスクールの条件とは?目的別25校と選び方
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
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.04.15
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
スキルアップ
2021.04.15
Webディレクターとは、Webサイト制作や、企画、運用の現場においてリーダーの役割を担う職種です。多くの業務をこなすため大変な仕事ではありますが、その分やりがいや魅力もある仕事です。本記事では、Webディレクターの具体的 […]
スキルアップ
2021.04.14
IT業界やエンジニアという職種に対してなんとなくイメージは持っているものの、具体的にどんな仕事をしているのか詳しく知らないという方もいらっしゃるでしょう。本記事では、IT業界とはどんな業界なのかをわかりやすく解説。各業種 […]
スキルアップ
2021.04.02
IT業界未経験からITエンジニアへ転職しようとするとき、強い味方になってくれるのが資格です。IT系の資格試験には数多くの種類があり、取得することでスキルの証明が可能。本記事では、未経験者が就職を有利にするためのおすすめ資 […]
スキルアップ
2021.04.01
「プログラミングができると就活が余裕らしいけど、大学生のうちにプログラミングを学ぶメリットって何?」と考えている方に向けて、本記事では元エンジニアである筆者がこれまでの経験則をもとに、在学中にプログラミングを学習するメリ […]
スキルアップ
2021.04.01
【2021年最新】いざJava SE 11のBronze資格にチャレンジしようと思っても「申込方法が複雑すぎて難しい…」と困っている方も多いのでは?本記事では、2020年に新しくなったOracle認定Javaプログラマ試 […]
INTERNOUS,inc. All rights reserved.