HTML DOM getBoundingClientRect()メソッドの使い方を徹底解説
getBoundingClientRect()メソッドとは
HTML DOMのgetBoundingClientRect()メソッドは、要素のサイズや位置をビューポート（表示領域）を基準に取得するためのメソッドです。
戻り値はDOMRect型のオブジェクトで、以下の8つのプロパティを持っています。
- left
- top
- right
- bottom
- x
- y
- width
- height
なお、このバウンディングボックス（外接矩形）の位置は、ページのスクロール位置が変わるとそれに応じて変化する点に注意してください。
構文
getBoundingClientRect()メソッドの構文は以下の通りです。
element.getBoundingClientRect()
サンプルコード
それでは、getBoundingClientRect()メソッドを使用した具体的な例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<script>
function RectInfo() {
document.getElementById("Sample").innerHTML="";
var d = document.getElementById("DIV1");
var Rect = d.getBoundingClientRect();
rl = Rect.left;
rt = Rect.top;
rw = Rect.width;
rh = Rect.height;
document.getElementById("Sample").innerHTML +="Left: " + rl + ",<br> Top: " + rt + ",<br> Width: " + rw + ",<br> Height: " + rh;
}
</script>
<style>
#DIV1{
width:350px;
height:250px;
border:2px solid blue;
color:red;
}
</style>
</head>
<body>
<h1>getBoundingClientRect() example</h1>
<div style="height:200px; width:300px; overflow:auto;">
<div id="DIV1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<br>
<button onclick="RectInfo()">GET INFO</button>
<p id="Sample"></p>
</body>
</html>実行結果
上記のコードを実行すると、次のような画面が表示されます。
「GET INFO」ボタンをクリックすると、以下のように要素の位置とサイズの情報が出力されます。
コードの解説
このサンプルコードの仕組みを順番に見ていきましょう。
まず、高さ200px・幅300pxのdiv要素を作成しています。overflowプロパティにautoを指定しているため、コンテンツがdivからあふれる場合には自動的にスクロールバーが表示されます。その内部には、スタイルが適用されたid「DIV1」を持つ別のdiv要素が配置されています。
#DIV1{
width:350px;
height:250px;
border:2px solid blue;
color:red;
}
<div style="height:200px; width:300px; overflow:auto;">
<div id="DIV1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>次に、ユーザーがクリックした際にRectInfo()メソッドを実行する「GET INFO」ボタンを作成しています。
<button onclick="RectInfo()">GET INFO</button>
RectInfo()メソッドでは、まずgetElementById()メソッドを使って対象のdiv要素を取得し、変数dに代入しています。続いて、変数dに対してgetBoundingClientRect()メソッドを呼び出すことで、div要素に関する情報を含むDOMRectオブジェクトを取得し、これを変数Rectに格納しています。
最後に、DOMRectオブジェクトのleft、top、width、heightの各プロパティを参照することで、ビューポートを基準とした要素の位置とサイズを取得します。これらの情報は、innerHTMLプロパティを通じてid「Sample」の段落要素内に出力される仕組みです。
function RectInfo() {
document.getElementById("Sample").innerHTML="";
var d = document.getElementById("DIV1");
var Rect = d.getBoundingClientRect();
rl = Rect.left;
rt = Rect.top;
rw = Rect.width;
rh = Rect.height;
document.getElementById("Sample").innerHTML +="Left: " + rl + ",<br> Top: " + rt + ",<br> Width: " + rw + ",<br> Height: " + rh;
}-
HTML DOMのhasAttributes()メソッドとは？構文・使い方・サンプルコードを解説
HTML DOMのhasAttributes()メソッドは、ある要素が属性（attribute）を1つでも持っているかどうかを判定するためのメソッドです。要素が属性を保持している場合はtrueを返し、1つも属性を持っていない場合はfalseを返します。また、このメソッドを要素ノード以外のノードに対して呼び出した場合、戻り値は常にfalseになるという特徴があります。 構文 hasAttributes()メソッドの基本構文は以下のとおりです。 node.hasAttributes() 引数は不要で、対象となるノードに対して直接呼び出すだけで、真偽値（Boolean）が返されます。 使用例 ここで
-
HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説
HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや