JavaScript が要素サイズとサイズ操作を取得する summary_javascript スキル

1. 要素

のインライン スタイルを取得します。

コードをコピーします コードは次のとおりです:

var obj = document.getElementById("テスト");
alert(obj.height "n" obj.width);
// 200px 200px typeof=string はスタイル属性
の値を表示するだけです

2. 計算されたスタイルを取得します

コードをコピーします コードは次のとおりです:

var obj = document.getElementById("テスト");
var style = null;
if (window.getComputedStyle) {
Style = window.getComputedStyle(obj, null) // 非 IE
; } else {
スタイル = obj.currentStyle // IE
}
alert("width=" style.width "nheight=" style.height);

注: 要素の幅と高さが設定されていない場合、IE 以外のブラウザではデフォルトの幅と高さが返されます。 IE で自動文字列

を返す

3. タグ

に記述されたスタイルを取得します。

コードをコピーします コードは次のとおりです:

var obj = document.styleSheets[0]; // [object StyleSheetList] スタイル シートの数var rules = null;// [object CSSRule]
if (obj.cssRules){
Rule = obj.cssRules[0] // 非 IE [object CSSRuleList]
; } else {
ルール = obj.rules[0] // IE [オブジェクト CSSRuleList]
; }
アラート(rule.style.width);

cssRules (またはルール) は、インライン スタイルとリンク スタイルの幅と高さのみを取得できますが、インライン スタイルと計算スタイルを取得することはできません。

要約: 要素のサイズを取得する上記の 3 つの CSS メソッドは、要素の CSS サイズを取得することしかできず、要素自体の実際のサイズを取得することはできません。たとえば、パディング、スクロール バー、境界線などを追加します。

4. 要素の実際のサイズを取得します

1. clientWidth と clientHeight
この属性セットは、要素の表示領域のサイズ、要素のコンテンツとパディングが占めるスペースを取得できます。要素のサイズが返されますが、単位はありません。100em などの単位を強制的に設定しても、px のサイズが返されます。 （CSSを取得する場合は、設定したスタイルに従って取得されます）。要素の実際のサイズについては、 clientWidth と clientHeight は次のように理解されます:
a. 境界線を追加します。
b. マージンを追加します。
c. スクロール バーを大きくすると、最終的な値は元のサイズからスクロール バーのサイズを引いた値になります。 d. パディングを増やします。最終的な値は、元のサイズにパディングのサイズを加えたものになります。

コードをコピーします コードは次のとおりです:

#テスト{
背景色: 緑;
幅: 200px;
高さ: 200px;
境界線: 実線 5px 赤 /* 理解に対応、結果: 200,200 */
Margin: 10px; /* b の理解に対応、結果: 200,200*/
Padding: 20px; /* C の理解に対応、結果: 240,240*/
Overflow:scroll; /* d の理解に対応し、結果は次のようになります: 223, 223, 223=200 (CSS サイズ) 40 (両側のパディング) - 17 (スクロール バーの幅) */
}
window.onload = function(){
var obj = document.getElementById("テスト");
alert(obj.clientWidth "," obj.clientHeight);
};

注: CSS の幅と高さが設定されていない場合、IE 以外のブラウザにはスクロール バーとパディングの計算されたサイズが含まれますが、IE ブラウザは 0 (IE8 で修正) を返します。

2. スクロール幅とスクロール高さ
このプロパティのセットは、スクロール コンテンツ (表示コンテンツ) の要素サイズを取得できます。要素のサイズを返します。デフォルトの単位は px です。 CSS の幅と高さを設定しない場合は、計算された幅と高さが取得されます。要素の実際のサイズについては、scrollWidth とscrollHeight は次のように理解されます:
1. 境界線を追加します。ブラウザーごとに解釈が異なります (以下は IE8 では正常に機能しますが、IE6 では機能しません):
a) Firefox および Opera ブラウザでは、境界線のサイズが 220x220 に大きくなります
b) IE、Chrome、Safari ブラウザは境界線サイズ 200x200
を無視します。 c) IE ブラウザでは、元のコンテンツの高さ 200x18 のみが表示されます (IE8 ではこの問題が修正されています)
2. パディングを追加します。最終的な値は、元のサイズにパディング サイズを加えた値 (220x220、IE は 220x38) になります
3. スクロール バーを追加します。最終的な値は、元のサイズからスクロール バーのサイズを引いた値 (184x184、IE は 184x18
) になります。 4. 外部国境要塞を追加しました。変更はありません。
5. コンテンツのオーバーフローを増やします。Firefox、Chrome、IE は最初の 3 つのブラウザよりも低い高さを取得し、Safari は最初の 3 つのブラウザよりも高い高さを取得します。

3. offsetWidth と offsetHeight
このプロパティのセットは、ボーダー、パディング、スクロール バーを含む要素の実際のサイズを返すことができます。要素のサイズを返します。デフォルトの単位は px です。 CSS の幅と高さを設定しない場合は、計算された幅と高さが取得されます。要素の実際のサイズについては、offsetWidth と offsetHeight は次のように理解されます:
1. 境界線を追加します。最終的な値は、元のサイズに境界線のサイズを加えた値 (220) になります。 2. パディングを増やします。最終的な値は、元のサイズにパディング サイズを加えた値 (220) になります。 3. 外部国境要塞を追加しました。変更はありません
4. スクロールバーを追加します。変更なし、減少なし
要素のサイズを取得するには、通常、ブロックレベルの要素と CSS サイズが設定された要素を使用する方が便利です。特にインライン要素(inline)やサイズが設定されていない要素の場合は厄介なので、使用する際は注意することをおすすめします。

コードをコピーします コードは次のとおりです:

テスト div 要素

#テスト{
背景色: 緑;
幅: 200px;
高さ: 200px;
枠線: 10px 赤 /*結果: 220,220*/
マージン: 10px; /*結果: 220,220 (変更なし)*/
パディング: 10px; /*結果: 240,240*/
オーバーフロー: スクロール; /*結果: 240,240 (変更なし)*/
}
window.onload = function(){
var obj = document.getElementById("テスト");
alert(obj.offsetWidth "," obj.offsetHeight);
};

5. 要素の周囲のサイズを取得します

1. clientLeft と clientTop は境界線のサイズを取得します
この属性セットは、要素によって設定された左境界線と上境界線のサイズを取得できます。現在、Left グループと Top グループのみが提供されており、Right と Bottom グループは提供されていません。 4 つの辺の幅が異なる場合は、計算されたスタイルを通じて直接取得するか、上記の 3 つのグループを減算して要素のサイズを取得することができます。 右枠の幅: obj.offsetWidth-obj.clientWidth-obj.clientLeft
下の境界線の幅: obj.offsetHeight-obj.clientHeight-obj.clientTop

コードをコピーします コードは次のとおりです:

テスト div 要素

#テスト{
背景色: 緑;
幅: 200px;
高さ: 200px;
境界線の上部: 10 ピクセルの赤の実線
右枠線: 実線 20px #00ff00;
境界線の下部: 30 ピクセルの青の実線;
左枠: 実線 40px #808080; }
window.onload = function(){
var obj = document.getElementById("テスト");
alert(obj.clientLeft "," obj.clientTop) // 40,10
; };

2. offsetLeft と offsetTop
この属性セットは、親要素を基準とした現在の要素の位置を取得できます。親要素を基準とした要素の現在位置を取得するには、position:absolute に設定するのが最善です。そうしないと、ブラウザーごとに解釈が異なります。
a. 位置を絶対に設定すると、すべてのブラウザが同じ値を返します。例:

コードをコピーします コードは次のとおりです:

テスト div 要素

#テスト{
背景色: 緑;
幅: 200px;
高さ: 200px;
位置: 絶対;
左: 30px;
上: 20px;
}
window.onload = function(){
var obj = document.getElementById("テスト");
alert(obj.offsetLeft "," obj.offsetTop) // 30, 20
; };

b. 境界線とパディングを追加しても位置には影響しませんが、外側のパディングを追加すると増加します。

3. box.offsetParent が親要素を取得します
offsetParent では、親要素が の場合、非 IE は body オブジェクトを返し、IE (IE6) は html オブジェクトを返します。 2 つの要素がネストされている場合、上の親要素でposition:absolute が使用されていない場合、offsetParent は body オブジェクトまたは html オブジェクトを返します。したがって、offsetLeft と offsetTop を取得する場合、CSS の位​​置決めは非常に重要です。
多くのレイヤーで外側のレイヤーが配置されている場合、内側のレイヤー要素と body または html 要素の間の距離を取得するにはどうすればよいでしょうか?つまり、ページ上の任意の要素の位置を取得します。次に、上方向に継続的にバックトラックすることで累積を達成する関数を作成できます。

コードをコピーします コードは次のとおりです:

box.offsetTop box.offsetParent.offsetTop; // レイヤーが 2 つだけの場合

関数 offsetLeft(要素){
var left = element.offsetLeft // 最初のレイヤーの距離を取得します
varparent = element.offsetParent // 最初の親要素を取得します
While (parent !== null) { // 前の親要素がある場合
left =parent.offsetLeft // このレイヤーの距離を累積します
parent =parent.offsetParent // このレイヤーの親要素を取得します
} //ループを継続します
左に戻ります;
}

4.scrollTopとscrollLeft
この属性セットは、スクロール バーが非表示になっている領域 (スクロール バーの上の領域) のサイズを取得でき、また、この領域を見つけるように設定することもできます。スクロール バーを初期位置までスクロールさせたい場合は、次の関数を作成できます:

コードをコピーします コードは次のとおりです:

関数scrollStart (要素) {
If ( element.scrollTop != 0 ) {
element.scrollTop = 0;
}
}

5.getBoundingClientRect()
このメソッドは、left、top、right、bottom の 4 つのプロパティを含む四角形オブジェクトを返します。要素の各辺とページの上辺および左辺との間の距離をそれぞれ表します。

コードをコピーします コードは次のとおりです:

var box=document.getElementById('box') // 要素を取得します
alert(box.getBoundingClientRect().top); // 要素の上部とページの上部の間の距離
alert(box.getBoundingClientRect().right); //要素の右側とページの左側の間の距離
alert(box.getBoundingClientRect().bottom); //要素の下部とページの上部の間の距離
alert(box.getBoundingClientRect().left); //要素の左側とページの左側の間の距離

注: IE、Firefox3、Opera9.5、Chrome、Safari がサポートされています。IE では、デフォルトの座標は (2,2) から計算されるため、最終的な距離は他のブラウザよりも 2 ピクセル大きくなります。互換性を持たせるために。

コードをコピー コードは次のとおりです:

document.documentElement.clientTop; //非 IE は 0、IE は 2
document.documentElement.clientLeft; //非 IE は 0、IE は 2
functiongGetRect (要素) {
var rect = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left= document.documentElement.clientLeft;
戻る{
TOP: RECT.TOP -TOP、
底部:rect.bottom - 上部、
左 右: 長方形右 - 左
}
}

外側のマージン、内側のマージン、境界線、スクロール バーをそれぞれ追加して、すべてのブラウザーが一貫しているかどうかをテストします。

以上がこの記事で説明した内容のすべてです。気に入っていただければ幸いです。