HTML DOM getBoundingClientRect（）メソッド
HTML DOM getBoundingClientRect（）は、ビューポートの位置を基準にした要素サイズを返すために使用されます。これは、左、上、右、下、x、y、幅、高さの8つのプロパティを持つDOMRectタイプのオブジェクトを返します。スクロール位置が変わると、外接する長方形の位置が変わります。
構文
以下は、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> 出力
これにより、次の出力が生成されます-
GETINFOボタンをクリックすると-
上記の例では-
最初に、高さと幅がそれぞれ200pxと300pxのdivを作成しました。オーバーフロープロパティが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（）メソッドを実行するボタンGETINFOを作成しました-
<button onclick="RectInfo()">GET INFO</button>
RectInfo（）メソッドは、getElementById（）メソッドを使用して
次に、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（）メソッドは、要素に属性があるかどうかをチェックします。要素に属性が含まれている場合はtrueを返し、含まない場合はfalseを返します。このメソッドが要素ノード以外のノードで呼び出された場合、戻り値は常にfalseになります。 構文 以下は、hasAttribbutes（）メソッドの構文です- node.hasAttributes() 例 hasAttributes（）メソッドの例を見てみましょう- <!DOCTYPE html> <html> <body> <h1>hasAttributes(
-
HTML DOM focus（）メソッド
HTML DOM focus（）メソッドは、HTML要素にフォーカスを与えるために使用されます。フォーカスをすべてのHTML要素に適用することはできません。例：タグにフォーカスすることはできません。要素からフォーカスを削除するには、blur（）メソッドを使用します。 構文 以下は構文です- HTMLElementObject.focus() 例 focus（）メソッドの例を見てみましょう- <!DOCTYPE html> <html> <head> <style> input[type=text]:focus, p: