jsでのボックスモデルの詳細説明-jsチュートリアル-php.cn

jsでのボックスモデルの詳細説明

零下一度

リリース： 2017-07-18 16:02:53

オリジナル

2583 人が閲覧しました

1.jsボックスモデル

は、jsで提供される一連の属性とメソッドを通じてページ上の要素のスタイル情報値を取得することを指します

例:

# 多くのボックスがあります独自のプライベート属性:

<strong>HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype->Object.prototype<br/>var box = document.getElementById("box");<br/>console.dir(box);</strong>

ログイン後にコピー

ボックスモデルというと、誰もが最初に CSS ボックスモデルを思い浮かべるでしょう。JS ボックスモデルは、一連のプロパティとメソッドを通じてページ内のコンテンツを取得することを指します。 JS で提供される要素のスタイル情報の値。

#div (多くの独自のプライベートプロパティを持つ) -> HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype-> ;Object.prototype

以下はいくつかのJSメソッドです

1.クライアントシリーズ（現在の要素のいくつかのプライベートプロパティ）

コンテンツの幅と高さ：設定した幅/高さ高さの 2 つのスタイルはコンテンツの幅と高さです。高さの値が設定されていない場合、コンテナーの高さは内部のコンテンツに応じて自動的に調整されるため、取得される値は実際のコンテンツの高さになります。コンテンツの高さは多かれ少なかれ関係なく、高さが固定されるように設定されています。実際、コンテンツの高さは設定された値を指します。

実際のコンテンツの幅と高さ: これは実際のコンテンツの幅と高さを指します (設定した高さとは必ずしも関係ありません)。たとえば、コンテンツの場合は高さを 200px に設定します。オーバーフローした後、実際のコンテンツ高さは、オーバーフローしたコンテンツの高さを加算します

clientWidth/clientHeight コンテンツの幅/高さ + 左右/上下のパディング (コンテンツのオーバーフローとは関係ありません)

clientLeft:左境界線の幅 clientTop: 上部境界線の高さ(border[Left/Top]Width)

2、オフセット系列

OffsetWidth/offsetHeight:クライアント幅/クライアント高さ+左右/上下の境界線(と内容がはみ出るかどうかは関係ありません)

offsetParent: 現在の要素の親参照オブジェクト

offsetLeft /offsetTop: 親レベルの参照オブジェクトから現在の要素の外側の境界線の距離内側の境界線のオフセット

3. スクロールシリーズ

scrollWidth/scrollHeight: とまったく同じclientWidth/clientHeight (提供: コンテナ内のコンテンツがオーバーフローしない) コンテナ内のコンテンツがオーバーフローした場合、得られる結果は次のようになります: 実際のコンテンツの幅 (オーバーフローを含む) + 左パディング

scrollHeigh: 実際のコンテンツの高さ（オーバーフローを含む）+上部パディング

得られた結果はすべて値にほぼ等しい、なぜなら、同じブラウザでも、overflow="hidden" を設定するかどうかが最終結果に影響し、異なるブラウザで得られる結果も異なります。

scrollLeft/scrollTop: スクロールバーの幅と高さ

2. JSボックスモデルの属性の値に関する質問

　　我们通过这13个属性值获取到的结果永远不可能出现小数，都是整数，浏览器在获取结果的时候，还在原来真是结果的基础上进行四舍五入；

三、关于操作浏览器本身的盒子模型信息

　　clientWidth/clientHeight 是当前浏览器可视窗口的宽度和高度（一屏幕的宽度和高度）

　　scrollWidth/scrollHeight 是当前页面的真实的宽度和高度（所有屏加起来的宽度和高度~但是是一个约等于的值）

　　我们不管哪些属性，也不管是什么浏览器，也不管是获取还是设置，想要都兼容的话，需要写两套

　　document.documentElement[attr] || document.body[attr];

　　必须document.documentElement在前

　　例如document.documentElement.clientWidth || document.body.clientWidth

　　设置也需要写两套

　　编写一个有关于操作浏览器盒子模型的方法，代码如下　

//如果只传递了attr没有传递value，默认的意思是获取样式值。如果都传递了，意思是设置//不严谨的来说这就是有关于“类的重载”:同一个方法，通过传递的参数的不同实现了不同的功能function win(attr,value){if(typeof value === "undefined"){//属于获取操作return document.documentElement[attr] || document.body[attr];
            }//设置document.documentElement[attr] = value;
            document.body[attr] = value
        }

ログイン後にコピー

以上がjsでのボックスモデルの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。