ホームページ >ウェブフロントエンド >jsチュートリアル >JSボックスモデルの基本プロパティを最も詳しく説明（画像とテキストの例）
JSボックスモデルの基本プロパティを最も詳しく説明（画像とテキストの例）
- 藏色散人転載
- 2022-08-06 17:52:372153ブラウズ
#この記事では、JS ボックス モデルの基本プロパティ (clientWidth/Height、offsetWidth/) を画像とテキストで説明します。 Height、offsetTop/Left、scrollWidth/Height、scrollTop/Left、困っている友達のお役に立てれば幸いです。JS ボックスを作成します
<style>
.container {
width: 300px;
height: 300px;
border: 3px solid red;
margin: 50px;
position: relative;
}
.box {
padding: 30px;
width: 100px;
height: 150px;
border: 10px solid lightblue;
position: absolute;
top: 50px;
left: 50px;
font-size: 15px;
line-height: 100px;
text-align: center;
overflow: auto;
}
</style>
<body>
<div class="container">
<div class="box">盒子</div>
</div>
</body> モデル: 
ボックスのプロパティ:
- clientWidth / clientHeight: ボックス内の幅と高さ
(1) clientWidth: コンテンツの幅の左右のパディング
(2) clientHeight: コンテンツの高さの上下のパディング
#clientTop / clientLeft: 左と上の境界線の幅
- offsetWidth / offsetHeight :ボックスの表示領域の幅と高さ
- (1) offsetWidth: clientWidth の左右の境界線
(2) offsetHeight: clientHeight の上下の境界線
offsetParent: 親参照オブジェクトを取得します (必ずしも親要素である必要はありません) - 親参照オブジェクトを検索します:
(1) 同じ平面内で、最も外側の要素すべての子孫要素の親参照オブジェクトです;
( 2) 位置: 絶対/相対/固定に基づいて、要素はドキュメント フローから切り離されて新しい平面になり、それによって要素の親参照が変更されます。
(3) 本体の親参照が null です。 offsetTop / offsetLeft: 親参照からの上/左オフセット (現在の要素の外側の境界線から親参照要素の内側の境界線まで) 
scroll
- scrollWidth /scrollHeight: ビジュアル領域内の実際の幅と高さ
- (1) コンテンツのオーバーフローがない場合: scrollWidth/Height = clientWidth/Height
(2) オーバーフローがある場合は異なりますが、結果はボックスの実際の内容の幅と高さにほぼ等しくなります。上下のパディングは、ボックスの幅と高さになります。実コンテンツ;
(3) オーバーフローが発生する限り、オーバーフローの値も変化し、スクロールの結果がある程度変化します。
scrollTop/scrollLeft: 垂直/水平スクロール バーの高さ/幅curl 
注: 上記プロパティでは、scrollLeft とscrollTop のみが値を設定でき、他のプロパティは読み取り専用です
以上がJSボックスモデルの基本プロパティを最も詳しく説明（画像とテキストの例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。